盒子阴影和文字阴影
box-shadow 属性
属性向框添加一个或多个阴影。
格式
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
注意点
1.盒子阴影分为内阴影和外阴影,默认为外阴影。
2.快速生成盒子阴影可以只设置水平/垂直偏移量和模糊距离即可。
3.盒子阴影默认的颜色由盒子文字内容的颜色决定。
text-shadow 属性
格式
text-shadow: h-shadow v-shadow blur color ;
注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
注意点
1、文字阴影只有水平偏移、垂直偏移、模糊程度、阴影颜色,四个参数。
2.快速生成文字阴影可以只设置水平/垂直偏移量和模糊距离即可。
3.文字阴影默认的颜色由文字内容的颜色决定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影和文字阴影 </title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
text-align: center;
line-height: 200px;
/*box-shadow: 10px 10px 10px 10px black inset;*/
box-shadow: 10px 10px 10px;
color: yellow;
}
.box2 {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
text-align: center;
line-height: 200px;
font-size: 40px;
/*text-shadow: 10px 10px 10px black;*/
text-shadow: 10px 10px 10px;
color: purple;
}
</style>
</head>
<body>
<div class="box1">我是盒子</div>
<div class="box2">我是盒子</div>
</body>
</html>