【CSS3】渐变 阴影 遮罩

1. CSS3 渐变

渐变: 有规律的渐渐变化, 在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上.(替代图片), 意义是创建一张图片

gradient 可以应用在所有接受图像的属性上

1.1 分类:

线性渐变 (linear-gradient) 变化的方向是一条直线

径向渐变 (radial-gradient) 变化的方向是从圆心向四周运动运动

1.2. 线性渐变 (linear-gradient)

用于创建一个表示两种或多种颜色线性渐变的图片。

1.2.1 参数值:

1. 第一个参数: 渐变方向

   从哪到哪发生渐变

   关键词:

   • to left 设置渐变为从右到左 . 相当于: 270deg
     to right 设置渐变从左到右。相当于: 90deg
     to top 设置渐变从下到上。相当于: 0deg
     to bottom 默认）：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
   • 对角渐变:to top left / to top right / to bottom right / to bottom left

   角度值: 单位:deg

   (0deg = to top) 顺时针旋转

1. 第二个参数: 颜色, 位置 (百分比 | 数值)

   规定哪种颜色从开始发生渐变效果

   比如:red 10%

1. 第三个参数: 颜色, 位置 (百分比 | 数值)

   规定哪种颜色从开始发生渐变效果

   比如: blue 20%

2. 后面反复继续
   例子:

linear-gradient（30deg, red 10%, green 10%）

1.2.2 参数省略

第一个参数可以省略, 默认从上往下,

后续每个参数描述某个关键点的位置的颜色, 两个关键点之间渐变.

background-image: linear-gradient(#6fc 0%,red 100%);

1.2.3 渐变平铺

1. repeating-linear-gradient：重复的(线性渐变)
2. .repeating-radial-gradient：重复的(径向渐变)

1.2.4 带图片和透明度的渐变

background: linear-gradient(to right, rgba(255,255,255,0),  rgba(255,255,255,1)),url(abc.jpg);

1.3. 径向渐变(radio-gradient)

用来展示由原点（渐变中心）辐射开的颜色渐变。

使用方式:

radial-gradient(shape [size]?[at ,]?[,]+)

1.3.1 参数:

radial-gradient(shape [size] at[position],color 位置,color 位置，+)

镜像渐变：圆 / 椭圆 半径 at 圆心，颜色 位置，颜色位置

1. shape 形状

   • circle(圆)
   • ellipse(椭圆,默认)
   • 形状后面可以跟半径值

1. shape size: 半径

   圆形的半径圆只有一个值，椭圆有两个值，px | 关键词

   关键词:

   • closest-side：圆心到最近的边
     closest-corner：圆心到最近的角【
     farthest-side：圆心到离圆心最远的边
     farthest-corner(默认)：圆心到离圆心最远的角

1. position 确定圆心的位置

   X 坐标，Y 纵坐标；如果只提供一个，第二值默认为 50%，即 center

   值:

   • px %
   • X 关键词：left：左 center：中 right：右
   • Y 关键词：top：上 center：中 bottom：下

1. color-stop: 颜色 位置

   从中心到外部的颜色渐变范围

background-image: radial-grandient(circle,red,blue);

没有数值范围的时候颜色均分, 从圆心开始到矩形最远的点均分颜色, 然后绕圆心画圆染色, 支持很多很多颜色

实例:

radial-gradient(ellipse 100% 100% at 300px  300px, #f00 10%, #ff0 20%, #080 100%)

1.3.2 重复径向渐变

原点放射渐变的图像。它类似于并且采取相同的论据，但它重复无限地在各个方向上停止颜色以覆盖整个容器。

渐变平铺 repeating- 渐变属性

background: repeating-radial-gradient(red 0px ,red 20px,blue 20px,blue 40px);

2. 遮罩 mask

了解一下

2..1 属性值:

1. -webkit-mask-image：; 遮罩图片

   • url(‘’)
   • linear-gradient
   • radial-gradient

   任何类型图片都是可以的, 只是说不透明的图片我们看不到后面的背景

2. -webkit-mask-repeat 遮罩平铺

   属性值

   • 默认 repeat,
   • no-repeat
   • repeat-x
   • repeat-y
   • 行为类似于 background-repeat

3. -webkit-mask-position 遮罩位置

   属性值: 关键词 | % | length

   和 background-position 支持的属性值表现一模一样

4. -webkit-mask-size 遮罩尺寸

   值:% | length

   遮罩图片的大小

3、box-reflect() 倒影

box-reflect：none | direction offset mask-box-image

3.1. direction 倒影在对象的位置

1. above 上
2. below 下
3. left 左
4. right 右

3.2. offset: 用长度值来定义倒影与对象之间的间隔, 可以为负值

length | percentage

3.3. mask-box-image: 遮罩图像

1. ：使用绝对或相对地址指定遮罩图像。
   . linear-gradient：使用线性渐变创建遮罩图像。
   . radial-gradient：使用径向 (放射性) 渐变创建遮罩图像。
2. repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。
   . repeating-radial-gradient：使用重复的径向 (放射性) 渐变创建遮罩图像。
3. none：无遮罩图像

4. 盒子阴影 box-shadow

给盒子添加阴影表现效果，仿佛有光打到盒子上
和原盒子一样大小，包含 border

4.1 属性值

1. h-shadow 水平偏移量。允许负值（必需）
2. v-shadow 垂直偏移量。允许负值（必需）
3. blur 模糊半径（可选。）
4. spread 阴影的大小（可选。）
5. color 阴影的颜色（可选。）
6. outset 外部阴影（默认）内部阴影（inset 可选）

4.2 属性值介绍

1. 水平, 垂直偏移量长度单位

2. 模糊半径
   指阴影由完全的颜色到消失的长度，类于似渐变的长度。默认是 0

3. 阴影大小

   默认是 0，和原来一样大，单位px，正数表示放大，负数表示缩小

4. 颜色

   阴影颜色

5. inset/ outset，

   默认 outset 外阴影，可以写 inset 改成内阴影，不遮挡文字遮挡盒子，遮挡背景, 可用逗号分隔，类似背景渐变，可叠加

4.3 写法

box-shadow: h-shadow v-shadow blur spread color outset

box-shadow:10px 10px 5px 10px #000 outset 

5. 文字阴影 text-shadow

定义文字的阴影

5.1 属性值

1. h-shadow 水平偏移量。允许负值（必需）
2. v-shadow 垂直偏移量。允许负值（必需）
3. blur 模糊半径（可选。）
4. color 阴影的颜色（可选。）

类似于 box-shadow; 不支持缩放和内外阴影，可叠加逗号分隔

阴影叠加: 先渲染前面的，再渲染后面的

text-shadow:2px 2px 0px red, 2px 2px 4px green; 先渲染后面的，再渲染前面的

  
  
  
  
  
  



  
HELLO WORLD

5.2 文本阴影案例:

1. 层叠

color:red; 
font-size:100px; 
font-weight:bold; 
text-shadow:2px 2px 0px white, 4px 4px 0px red;/* 两个阴影 */

2. 光晕

color:white; 
font-size:100px; 
text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

3. 火焰文字

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; 
font-family:Verdana, Geneva, sans-serif; 
font-size:100px; 
font-weight:bold; 
color:white;