CSS属性: 阴影轮廓渐变

2022-02-22 05:22:15

注: 本文摘自宁静致远 - CSDN / 但愿人长久千里共婵娟 - CSDN

阴影

使用box-shadow属性可以为元素添加阴影效果, 比如

关键字	是否必须	作用	值
h-shadow	是	阴影的水平偏移量	长度值，正值代表阴影向右偏移，负值代表阴影向左偏移
v-shadow	是	阴影的垂直偏移量	长度值，正值代表阴影向下偏移，负值代表阴影向上偏移
blur	否	模糊值	长度值，值越大盒子的边界越模糊，默认值0，边界清晰
spread	否	阴影的延伸半径	长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小
color	否	阴影的颜色	颜色值，如果省略，浏览器会自行选择一个颜色
inset	否	将外部阴影设置为内部阴影	布尔类型

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

关键字	作用	值
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(direction,color1,color2);
- direction表示渐变的方向，此值直接写方向的起点即可，如：渐变方向为从左至右，直接写to left即可，渐变方向为从下至上，直接写to bottom即可
- 如果想要从中间到两边渐变的话可以 background: linear-gradient(to left,color1,color2,color1);

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

创建重复的线性渐变

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 表示完全不透明

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

background: radial-gradient(center,size,start-color,last-color);
background: radial-gradient(red, yellow, green);
- 可以是均匀渐变，也可以是非均匀渐变，改变渐变颜色的比例就行；还有重复渐变也是可以的