全栈笔记让前端飞前端资源&前端学习资料

CSS属性: 阴影 轮廓 渐变

2018-07-13  本文已影响6人  小贤笔记

注: 本文摘自 宁静致远 - 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 规定边框的颜色 颜色值

渐变

线性渐变

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

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

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

创建重复的线性渐变

角度渐变

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

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

径向渐变

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

上一篇 下一篇

猜你喜欢

热点阅读