html阴影 渐变,CSS 阴影 轮廓 渐变详解

阴影

box-shadow: h-shadow v-shadow blur spread color inset;

text-shadow: h-shadow v-shadow blur color;

关键字

是否必须

作用

值

h-shadow

是

阴影的水平偏移量

长度值，正值代表阴影向右偏移，负值代表阴影向左偏移

v-shadow

是

阴影的垂直偏移量

长度值，正值代表阴影向下偏移，负值代表阴影向上偏移

blur

否

模糊值

长度值，值越大盒子的边界越模糊，默认值0，边界清晰

spread

否

阴影的延伸半径

长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小

color

否

阴影的颜色

颜色值，如果省略，浏览器会自行选择一个颜色

inset

否

将外部阴影设置为内部阴影

inset (布尔类型)

轮廓

轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用, 比如

outline: outline-width outline-style outline-color;

关键字

作用

值

outline-width

规定边框的宽度

数值，可以使用一下常量：

1. thin：规定细轮廓

2. medium：默认，规定中等的轮廓

3. thick：规定粗的轮廓

4. length：允许您规定轮廓粗细的值

5. inherit：规定应该从父元素继承轮廓宽度的设置

outline-style

规定边框的样式

样式的可选值如下：

1. none：默认，定义无轮廓

2. dotted：定义点状的轮廓

3. dashed：定义虚线轮廓

4. solid：定义实线轮廓

5. double：定义双线轮廓，双线的宽度等同于outline-width的值

6. groove：定义3D凹槽轮廓，此效果取决于outline-color值

7. ridge：定义3D凸槽轮廓，此效果取决于outline-color值

8. inset：定义3D凹边轮廓，此效果取决于outline-color值

9. outset：定义3D凸边轮廓，此效果取决于outline-color值

10. inherit：规定应该从父元素继承轮廓样式的设置

outline-color

规定边框的颜色

颜色值

渐变

线性渐变

实现线性渐变，你至少需要定义两种颜色的结点，这两种结点就是你想平稳过渡的颜色，即：其中一种颜色结点为起点，另一种颜色结点为结束点

background: linear-gradient(color1,color2);

color1为起点结点，color2为结束点结点

同时也可以定义渐变的方向，是从上到下渐变，还是从左至右渐变，或者从右至左渐变，默认情况下是从上至下渐变的

background: linear-gradient(direction,color1,color2);

direction表示渐变的方向，此值直接写方向的起点即可，如：渐变方向为从左至右，直接写to right即可，渐变方向为从下至上，直接写to top即可

如果想要从中间到两边渐变的话可以 background: linear-gradient(to left,color1,color2,color1);

当然也可以对角渐变，如：从左上角到右下角

background: linear-gradient(left top,color1,color2);

创建重复的线性渐变

background: repeating-linear-gradient(red, yellow 10%, green 20%);

百分比是颜色所占比例

角度渐变

to left：设置渐变为从右到左。相当于: 270deg

to right：设置渐变从左到右。相当于: 90deg

to top：设置渐变从下到上。相当于: 0deg

to bottom：设置渐变从上到下。相当于: 180deg (这是默认值，等同于留空不写)

如果还想更多地控制渐变方向，可以改变渐变的角度

background: linear-gradient(angle,color1,color2,...);

angle是指水平线与渐变线之间的角度，是逆时针的, 比如: 0deg

也可以在渐变中使用透明度, 所以我们得使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

径向渐变

径向渐变是由中心向外渐变的。可以定义它中心 (默认渐变是中心是center) 、形状(圆形或椭圆形)、大小等

其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

background: radial-gradient(center,size,start-color,last-color);

background: radial-gradient(red, yellow, green);

可以是均匀渐变，也可以是非均匀渐变，改变渐变颜色的比例就行；还有重复渐变也是可以的

扩展

给文字 color 添加渐变效果的话, 可以这样写:

background: linear-gradient(#f00, #0f0);

background-clip: text;

color: transparent;