css3渐变

  • 渐变：线性渐变和径向渐变

线性渐变

  • background:linear-gradient() 定义线性渐变
  • background: linear-gradient(方向, 颜色1, 颜色2, …);
    属性：
  1. direction：设置渐变的方向：向上，向下，向左，向右，对角。
  • 默认方向：从上到下。
  • 如果只有使用一个方向值：则需要在linear前面加-webkit-（私有前缀）
  • 两个方向值：表示从哪里开始到哪里结束，需要在前面加to，如（to left bottmom）
  1. color:渐变的颜色，至少有两个颜色（默认是均等分布的）颜色用逗号隔开，如（red，yellow）
  2. 重复渐变：
    background：repeating-linear-gradient()
    重复渐变的颜色后面要跟上百分比代表色卡（red 10%，yellow 20%）

径向渐变

  • background:radial-gradient()定义径向渐变
  • radial-gradient(渐变中心at渐变形状 大小,颜色1,颜色2…)
  • position:代表渐变中心，默认从圆心开始渐变。改变默认渐变中心需要添加私有前缀-webkit-。不想添加可以是有at
    shape at position
  1. 取值：
  • center(默认)
  • left top
  • top=center top=top center
  • right top
  • right=right center=center
  • right
  • right bottom
  • bottom
  • left bottom
  • left

  1. 固定值：用坐标表示，单位px，要写两个值（X轴，y轴）

  2. 百分比：两个值，代表占据宽高的百分比

  3. shape定义渐变的形状，默认长方形是椭圆，正方形是正圆

  • 可以通过使用shape at position定义渐变形状以及位置
    5.size 参数定义了渐变的大小
  • closest-side 最近的边
  • farthest-side 最远的边
  • closest-corner 最近的角
  • farthest-corner 最远的角
  1. background: -webkit-repeating-radial-gradient（）用于重复径向渐变

文字渐变

  1. background:定义文字的背影以及线性变化
  2. -webkit-background-clip：text
  3. -webkit-text-fill-color:transparent;打造镂空文字，透明。

盒子阴影

  1. box-shadow 支持向盒子添加一个或者多个阴影
  • X轴(必要)：水平阴影的位置，允许负值
  • Y轴（必要）：垂直阴影的位置，允许负值
  • 阴影模糊半径：px
  • 阴影扩展半径：px
  • 阴影颜色：省略号默认为黑色
  • 投影方式：设置inset时为内部阴影方式，如果省略为外阴影方式

text-shadow: 水平偏移 垂直偏移 模糊程度 颜色;

滤镜(filter)