今天我们来了解一下文本阴影和盒子阴影
一、文本阴影(text-shadow)
使用text-shadow,可以在不使用图像表示文本的情况下,为段落、标题等元素中的文本添加动态的阴影效果。(有继承性)
在我们的文本添加上阴影之后,他可以变得非常的炫酷 ;
我们先来了解一下text-shadow的值:
X 水平阴影的位置,值可以为负数(不可省略)
Y 垂直阴影的位置,值可以为负数(不可省略)
blur 模糊的程度(可选)
color 阴影的颜色(可选)
none 默认值(text-shadow:none 可以取消文字的阴影效果)
我们先来做一个小例子:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>文本阴影</title>
</head>
<style>
div {
width: 300px;
height: 300px;
margin: 100px auto;
font-size: 50px;
color: red;
text-shadow: 20px 10px 5px #000000;
}
</style>
<body>
<div>
文本阴影
</div>
</body>
</html>
我们这里给文本设置了四个值,分别来看一下;
20px是来设置水平方向的位置,可以为负值;10px是设置垂直方向的位置,同样也可以为负值;5px是阴影的模糊值,模糊值越大阴影的模糊程度越大,不可以为负值;#000000这个颜色是我们的阴影的颜色,如果没有设置后面的这个颜色,那么阴影的默认颜色与文本的颜色相同。
我们的阴影还是可以设置多个,但是中间要用逗号隔开;
例:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>文本阴影</title>
</head>
<style>
div {
width: 300px;
height: 300px;
margin: 100px auto;
font-size: 50px;
color: red;
text-shadow: 20px 10px 5px #000000, -20px -10px 5px #ffff00;
}
</style>
<body>
<div>
文本阴影
</div>
</body>
</html>
注:模糊值不可以为负值,设置多阴影要用逗号隔开。
利用阴影可以做出很多炫酷的样式
例如我们比较炫酷的火焰字:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>文本阴影</title>
</head>
<style>
div {
width: 300px;
height: 300px;
margin: 100px auto;
font-size: 50px;
color: red;
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
-2px -15px 11px #f80, 2px -25px 18px #f20;
}
</style>
<body>
<div>
文本阴影
</div>
</body>
</html>
二、盒子阴影
box-shadow 盒子阴影
它其实跟文本阴影基本一致只是多了两个值而已
spread 阴影的范围
inset 将外阴影(outset)改成内阴影
来看一下例子:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>文本阴影</title>
</head>
<style>
div {
width: 200px;
height: 200px;
margin: 100px auto;
background: #666666;
box-shadow: 20px 10px 5px 5px blue, 20px 10px 5px 15px inset red;
}
</style>
<body>
<div></div>
</body>
</html>
前三个值是跟文本阴影一样是水平方向和垂直方向还有模糊值,这里我们写了四个值,第四个值是阴影的范围;
同样它也可以设置多阴影,也需要用逗号隔开;inset是这设置了它的内阴影,可以看到内阴影的范围值比外阴影的值要大,它的值越大,它阴影的范围就会越大。
注:盒子阴影的默认值就是(outset),如果设置这个值,不起作用,可选的值只有inset表示内阴影;