揭秘CSS实用技巧总结( 二 ) _CSS

文章插图

【揭秘CSS实用技巧总结】投影模拟多重边框
单侧投影

关键实现：box-shadow
具体分析：box-shadow 前两个参数指定阴影的x、y偏移量，注意若为正数时整体向右/向下偏移，那么相应的左方/上方会空出一部分来（可以用来隐藏模糊半径或扩张半径），负数相反；第三个参数是阴影模糊半径，即高斯模糊多增加出来的过度颜色；第四个参数是阴影扩张半径，表示阴影增加的尺寸，可以是负数，表示阴影缩短的尺寸：地址

box-shadow: 0 5px 4px -4px black;第二个参数使阴影整体下移 5px，第三个参数使阴影四周多了 4px 的高斯模糊（注意由于整体下移了 5px，所以此时上方还是没有阴影露出的），第四个参数又把阴影整体缩小了 4px，，所以左右两边才没有出现模糊半径导致的高斯模糊阴影色，从而实现单侧投影。

文章插图

单侧投影
还可以逗号分隔设置多个阴影色，比如下面的两侧投影效果：地址
box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;

文章插图

单侧投影
不规则投影

关键实现：filter: drop-shadow()
具体分析：box-shadow 不能透过透明背景显示出来，不能越过伪元素/子元素显示出来，而这些drop-shadow能做到。（但无论哪种投影都会被clip-path剪裁掉～～）地址

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

文章插图

不规则投影
滤镜的染色和褪色效果前端开发大都了解糊滤的高斯模镜效果是filter: blur()实现的，但是却很少使用滤镜的其他几个调色效果。filter 的值有blur()、drop-shadow()、url()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()～～可以使用复合形式如：filter: sepia(1) saturate(4)等。下面是filter属性值大集合：地址

文章插图

滤镜的染色和褪色效果
饼图 svg饼图的 css 实现方案非常奇怪，所以我忽略之。推荐使用 svg 的实现方案，非常简单，先来个基本教学吧～
先画个圆：
<svg width="100" height="100"> <circle r="25" cx="50" cy="50" /></svg>这里 r="25" 是半径25，cx cy 分别表示圆心的 x y 坐标。
circle { fill: yellowgreen; stroke: #666; stroke-width: 50;}这里给圆形定义了一个宽度 40 的描边: