1、文本阴影属性
text-shadow:值1 值2 值3 值4;
值1 : 水平方向的距离 (必须有的:支持负值)(向左为正值)
值2 : 垂直方向的距离 (必须有的:支持负值)(向下为正值)
值3 : 阴影的模糊程度 (不支持负值)
值4 : 阴影的颜色
第一个值 和 第二个值得位置不能互换。
如:text-shadow:10px 10px 4px red;
代表文字的阴影水平方向向右移动10px,垂直方向向下移动10px,阴影模糊程度为4px,阴影颜色为红色。
举例代码如下:



杨洋超帅!


效果如下图:
CSS3文本阴影、盒子阴影
当水平垂直方向距离为负值时代码如下:

说明:水平、垂直阴影的位置允许负值 可进行多阴影设置(逗号分隔的方式)

2、盒子阴影属性
box-shadow 盒子阴影:
X-shadow 必需的。水平阴影的位置。允许负值(向右为正)
Y-shadow 必需的。垂直阴影的位置。允许负值(向下为正)
blur 可选。模糊距离(程度)。
spread 可选。阴影的大小。
color 可选。阴影的颜色。
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影。
box-shadow: 10px 10px 5px 10px yellow inset;
代表盒子的阴影水平方向向右移动10px,垂直方向向下移动10px,阴影模糊程度为5px,阴影大小为10px,阴影颜色为红色,阴影在盒子内侧显示。
当不加inset的代码如下:






杨洋超帅!


效果如下:
CSS3文本阴影、盒子阴影
逆战班学员徐艺玮
2020/3/8

分类:

技术点:

相关文章: