CSS属性中的阴影属性
CSS3中的阴影属性包括文本阴影属性和盒子阴影属性。
一、文本阴影属性text-shadow
书写方式：text-shadow：x y a c;
1）x代表的是水平方向的距离值（该值必须有，并且支持负值）
2）y代表的是垂直方向的距离值（该值必须有，并且支持负值）
3）a代表的是阴影的模糊程度（不支持负值）
4）c代表的是阴影的颜色
tips:只有水平和垂直方向支持负值
x和y的位置不能互换
可以用逗号分隔的方式进行多阴影设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid #888888;
margin: 50px auto;
font-size: 50px;
text-align: center;
text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
}
</style>
</head>
<body>
<div>
我会冒火噢
</div>
</body>
</html>二、盒子阴影属性box-shadow
书写方式：box-shadow：x y blur spread color inset;
1）x代表的是水平阴影的位置（该值必须有，并且支持负值）
2）y代表的是垂直阴影的位置（该值必须有，并且支持负值）
3）blur代表的是模糊距离，可选可不选
4）spread代表的是阴影的大小，可选可不选
5）color代表的是阴影的颜色
6）从外层的阴影（开始时）改变阴影内侧阴影 可选可不选
tips：水平和垂直方向允许设置负值
可用逗号分隔的方式设置多阴影
x和y的位置不能互换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid #888888;
margin: 50px auto;
font-size: 50px;
text-align: center;
text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
box-shadow: 10px 10px 20px 20px springgreen inset;
}
</style>
</head>
<body>
<div>
我会冒火噢
</div>
</body>
</html> 相关推荐
jiedinghui 2020-05-14
葉無聞 2020-04-19
impress 2020-01-11
zengni 2019-12-24
zhanghao 2019-12-12
CaiKanXP 2019-11-12
waterv 2019-10-31
CaiKanXP 2019-10-20
zyhui 2018-01-13
沉着前进 2018-02-08
武林半侠 2018-01-13
Phoebe的学习天地 2019-06-28
csscode 2014-12-02
zuncle 2014-09-17
沉着前进 2014-07-21
尚衍亮 2014-04-10
昔人已老 2014-01-05
Phoebe的学习天地 2013-07-02
wangnantjobj 2019-06-21