CSS属性中的阴影属性
2021-04-09 11:27
标签:oct idt doc auto 文本 大小 模糊 距离 meta
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>
CSS属性中的阴影属性
标签:oct idt doc auto 文本 大小 模糊 距离 meta
原文地址:https://www.cnblogs.com/shewill/p/12444069.html