随笔分类 -  css

css：clip可以替代隐藏overflow
摘要：clip:rect(top,right,bottom,left);position:absolute; 网页进度就可以通过clip:rect实现红色进度区域 阅读全文
posted @ 2017-12-05 17:35 mudeng007 阅读(1020) 评论(0) 推荐(0)
table表头固定，内容滚动条
摘要：table-layout: fixed; border-width: 0;border-collapse:collapse;empty-cells: show; 序号 ... 阅读全文
posted @ 2017-08-24 15:40 mudeng007 阅读(977) 评论(0) 推荐(0)
CSS：简单的Loader
摘要：body { margin: 0; padding: 0; background:#3498db; } .cs-loader { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .cs-loader-inner { transform: translateY(-50%... 阅读全文
posted @ 2017-06-22 14:04 mudeng007 阅读(227) 评论(0) 推荐(0)
CSS：SVG animation
摘要：html{background-color: #28505D;} .planePath {stroke: #D9DADA; stroke-width: .1%;stroke-width: .5%; stroke-dasharray: 1% 2%;stroke-linecap: round;fill: none;} .fil1{fill: #D9DADA;} .fil2{fill: #C5C... 阅读全文
posted @ 2017-06-22 12:06 mudeng007 阅读(330) 评论(0) 推荐(0)
CSS：镜像Gradients欢迎
摘要：body{background: black radial-gradient(circle farthest-side at calc(var(--mouseX, 1) * 1px) calc(var(--mouseY, 1) * 1px), hsl(var(--mouseX, 5), 75%, 75%), hsl(var(--mouseY, 45), 75%, 75%) ); } h... 阅读全文
posted @ 2017-06-22 11:55 mudeng007 阅读(227) 评论(0) 推荐(0)
CSS：svg倒计时
摘要：*{margin: 0;padding: 0;} body{font-family: "Microsoft YaHei"} /*------------------------- The clocks --------------------------*/ .time-countdown{color: #7d7d7d;width: 220px;float: left;tex... 阅读全文
posted @ 2017-06-20 14:44 mudeng007 阅读(183) 评论(0) 推荐(0)
CSS：投影
摘要：双侧投影 单侧投影巧用两次 阅读全文
posted @ 2017-06-16 14:11 mudeng007 阅读(177) 评论(0) 推荐(0)
CSS：毛玻璃效果
摘要：通过伪元素进行处理，然后将其元素定位到元素的下层（z-index:-1），它的背景将会无缝比配到body中 阅读全文
posted @ 2017-06-16 13:56 mudeng007 阅读(186) 评论(0) 推荐(0)
CSS：圆角tab
摘要：.tab .item{position: relative;display: inline-block;padding: .5em 1em .35em;color: white;} .tab .item::before{content:'';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index:-1;backgro... 阅读全文
posted @ 2017-06-15 20:59 mudeng007 阅读(580) 评论(0) 推荐(0)
svg_stroke-width=1px属性，显示结果变宽成为2px的问题，以及文字模糊的问题
摘要：这个是显示2px的，有问题： 纠正之后的，显示1px： 文字模糊： 变粗模糊的文字 清晰的文字 阅读全文
posted @ 2017-05-17 18:07 mudeng007 阅读(2135) 评论(0) 推荐(0)
display:flow-root
摘要：两个浮动元素，造成父元素无法被撑起来 1.clearfix可以解决 2.display:flow-root(display新属性，可替代clearfix) 阅读全文
posted @ 2017-05-08 10:53 mudeng007 阅读(1180) 评论(0) 推荐(0)
css3-模糊图片
摘要：.blur{ filter: blur(6px); -webkit-filter: blur(6px); /* chrome, opera */ -ms-filter: blur(6px); -moz-filter: blur(6px); filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=6, Mak... 阅读全文
posted @ 2017-04-26 13:43 mudeng007 阅读(110) 评论(0) 推荐(0)