
css
听听那晚风
这个作者很懒,什么都没留下…
展开
-
【css】七夕程序员的浪漫,3d旋转相册
【css】七夕程序员的浪漫,3d旋转相册。原创 2022-08-04 15:56:01 · 4188 阅读 · 0 评论 -
css自定义滚动条样式
很多时候为了页面更美观,需要自定义滚动条的样式,//.select-list-item是有滚动条盒子的class名 设置了overflow-y:auto才有的滚动条.select-list-item::-webkit-scrollbar { /*滚动条的宽度*/ width: 5px; } .select-list-item::-webkit-scrollbar-thumb { /*滚动条里面小方块样式设置*/ border-radius: 10px; -web原创 2021-06-28 19:11:18 · 459 阅读 · 0 评论 -
css3动画实现摩天轮效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>摩天轮</title> <style> *{ margin: 0; padding: 0; } .box{ width: 500px; height: 500px; margin: 200px auto; positi.原创 2021-01-04 11:26:59 · 2602 阅读 · 0 评论 -
css3动画实现轮播图效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图</title> <style> *{ margin: 0; padding: 0; } .lunbo{ width: 720px; height: 896px; margin: 100px auto; overflow:原创 2021-01-04 11:12:07 · 839 阅读 · 1 评论 -
纯CSS3画哆啦A梦
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>哆啦A梦</title> <style type="text/css"> .big{ width: 500px; height: 680px; border:1px solid black; position: absol.原创 2021-01-04 11:03:57 · 350 阅读 · 0 评论 -
Vue去除浏览器默认margin值
需要在index.html文件设置即可*{ margin: 0; padding: 0;}原创 2020-11-30 17:21:38 · 2054 阅读 · 0 评论 -
JS将html生成海报图片,并解决生成的图片模糊问题
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <script type="text/javascript" src="js/jquery.js"> <.原创 2020-11-23 09:58:20 · 104878 阅读 · 1 评论 -
去除select选中时的边框以及文本居中
文本居中select{ text-align: center; text-align-last: center;}选中时的边框去除select{ outline:none;}原创 2020-09-27 11:00:15 · 3081 阅读 · 0 评论 -
前端如何设置浏览器网页标签页前的小图标
第一步: 获取favicon图:在网页后面加 /favicon.ico 然后将图片保存,记住得是原网址后面加第二步:在html文件里通过引入,href里的地址根据图片所在位置填写原创 2020-09-27 10:57:01 · 3381 阅读 · 0 评论 -
原生JS实现视频播放器
实现代码:<div class="player"> <div class="show" style="height:100%"> <video id="my_video" height="100%" src="./img/dog.mp4"></video> <div class="loading"></div> </div> <div class="controller"> <div..转载 2020-09-24 11:39:12 · 1796 阅读 · 0 评论 -
设置input placeholder属性的字体样式
未改善前效果改善后效果<input type="text" placeholder="请输入您要查询的客户" /><style>input::placeholder { color: #7F6FBE; text-align: center;}</style>这样效果是有了,如果要做浏览器兼容,可以加上浏览器前缀如:input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #7F6F原创 2020-08-01 17:06:54 · 311 阅读 · 0 评论 -
css通过border-image设置渐变边框的时候,border-radius无效
bug图,这里设置了border-radius但是未生效解决思路:思路一:最简单的是叫ui把边框切下来,然后background:url()插入当背景图思路二: 放两个盒子,父盒子设置背景渐变色,并且设置padding值,值为边框的大小,记得设 box-sizing:border-box;然后再设置border-radius。子盒子宽高设置100%,背景色设置原本的背景色将父盒子的渐变色覆盖,最重要的 border-radius值要和父盒子保持一致可以看到注释部分就是我踩的坑,原本想直接用b原创 2020-08-01 16:57:23 · 4596 阅读 · 0 评论