前言
此系列主要和大家交流一下css日常开发或是拓展中的一些技巧,附上个人的一些理解与注意点(有些理解在代码层),欢迎指正~
本文主要说一下以下5种效果: “毛玻璃、折角、切角、阴影、内圆角”。
《毛玻璃》
示例图
小技巧
1.filter与定位的位置关系
2.blur高斯模糊
3.模糊蒙版继承父级容器宽高
代码&理解
-
css
.pub-position{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .glass-wrap{ width: 325px; height: 185px; margin: 200px auto; background: url('../images/glass.jpg') no-repeat; background-size: contain; position: relative; } .word-wrap,.content{ width: 200px; height: 80px; text-align: center; line-height: 80px; overflow: hidden; color: #fff; } /* 这里使用同级元素解决文字容器做滤镜被覆盖的问题 */ .word-wrap::before{ content: ''; width: 325px; height: 185px; position: absolute; left: -10px; /* 这个值影响背景图片的位置 */ top: 0; right: 0; bottom: 0; margin: auto; filter: blur(10px); background: url('../images/glass.jpg') no-repeat -52.5px 0; background-size: contain; }
-
html
<div class="glass-wrap"> <div class="pub-position word-wrap"></div> <p class="pub-position content">模糊玻璃</p> </div>
《切角》
示例图
小技巧
1.linear-gradient 累加为一层
2.background-size 控制数量
3.transparent 控制大小
代码&理解
-
css
div{ width: 200px; height: 80px; text-align: center; line-height: 80px; margin: 100px auto; color: #fff } /* 知识点: linear-gradient 每加一个为累加一层 background-size: 单角一层不用 双角 50% 100%; 三角 50% 50%; (切角宽度 transparent 0) 全角 50% 50%; */ .corner-cut1{ background: rgb(201, 125, 26); /*compatibility*/ background: linear-gradient(-45deg, transparent 15px, rgb(201, 125, 26) 0); } .corner-cut-all{ background: rgb(201, 125, 26); /*compatibility*/ background: linear-gradient(135deg, transparent 15px, rgb(201, 125, 26) 0) top left, linear-gradient(225deg, transparent 15px, rgb(201, 125, 26) 0) top right, linear-gradient(45deg, transparent 15px, rgb(201, 125, 26) 0) bottom left, linear-gradient(-45deg, transparent 15px, rgb(201, 125, 26) 0) bottom right; /* transparent 15px 越大切角越大 */ /* 四切角 关系为90deg */ /* 切角读书以上下边为起点 默认90deg */ background-size: 50% 50%; /* 类设置图片尺寸 使每一渐变层只占元素的1/2 从而不覆盖transparent的角度 */ background-repeat: no-repeat; }
-
html
<div class="corner-cut1">切角</div> <div class="corner-cut-all">全切角</div>
《折角》
示例图
小技巧
1.切角轴为45°切(正切)
2.第一层折角效果 “/”的使用以及 size的计算(关联①计算)
代码&理解
-
css
div{ width: 200px; height: 80px; text-align: center; line-height: 80px; margin: 100px auto; color: #fff } .corner-cut1{ background: #58a; /* 优雅降级 */ background: linear-gradient(-135deg, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 30px 30px, linear-gradient(-135deg, transparent 20px, #58a 0); }
-
html
<div class="corner-cut1">折角</div>
《阴影》
示例图
小技巧
1. box-shadow 叠加
代码&理解
-
css
div{ width: 200px; height: 80px; text-align: center; line-height: 80px; background: rgb(201, 125, 26); margin: 100px auto; color: #fff } .shadow-bottom{ box-shadow: 0 5px 5px rgb(124, 74, 8) } .shadow-slide { box-shadow: 5px 0 5px rgb(124, 74, 8), -5px 0 5px rgb(124, 74, 8) } .shadow-right-top{ box-shadow: 0 -5px 5px rgb(124, 74, 8),5px 0 5px rgb(124, 74, 8) }
-
html
<div class="shadow-bottom">单边阴影</div> <div class="shadow-slide">左右阴影</div> <div class="shadow-right-top">右上角阴影</div>
《内圆角》
示例图
小技巧
1. outline 描边特性
代码&理解
-
css
.wrap{ background: #d3941e; border-radius: 8px; width: 200px; height: 80px; margin: 100px auto; box-shadow: 0 0 0 8px #754906; outline: 8px solid #754906 } .wrap-special{ outline: 6px solid #754906 }
-
html
<div class="wrap"></div> <div class="wrap wrap-special"></div>
结语:
不定期更新,因为是一些技巧类,所以本文比较直接,没有一步步分析,欢迎指正交流,感谢支持~
GIT源码,直通车