shadow 阴影、mask 遮罩、reflect 倒影、blur 模糊、calc 计算

text-shadow:

  文字阴影

  x y 模糊值 color

注意:阴影的默认颜色和设置的颜色相同

  可以通过逗号隔开设置多阴影

box-shadow:

  盒子阴影

  x y 模糊值 范围 颜色 inset(内阴影) 多阴影

注意:默认颜色是黑色,

默认是外阴影,如果设置不起作用,可选的值只有 inset 表示内阴影。

-webkit-mask:

  url repeat x y w h 多遮罩

注意:mask目前还没有标准化,所以还需要加浏览器前缀。

默认 x y 都平铺

-webkit-box-reflect

  above(上) below(下) left right 距离 遮罩|渐变

    渐变只是针对透明度的渐变,不能支持颜色的渐变。写两个 rgba 的值。

    transform:scale(-1)可以实现翻转效果,比较兼容。

注意:reflect 目前还没有标准化,所以还需要加浏览器前缀。

blur:模糊

  filter:blur(像素,值越大越模糊)

calc:计算

  四则运算:可以用于百分比与像素之间的运算

    width:calc(100% - 100px);

 

posted @ 2021-01-16 11:24  小_小白  阅读(296)  评论(0)    收藏  举报