Original:
CSS text shadows and elements used in shadow
Introduction text shadow #
- In
CSSuse text-shadowproperty of the text shadow, a total of the property 4attribute values such as: horizontal shading, vertical hatching, (the distance resolution or blurred), color shading.
text-shadowAttribute value described in the text shadow practice: The first value is the horizontal movement direction of the shadow set, the second value is set shadow vertical direction, and the third value is set shadow blur from the fourth value is set shadow color .text-shadowProperty value may be a negative number.- Text may be provided a plurality of shadow separated by commas.
Copy
text-shadow: 1px 2px 3px red ,1px 2px 6px rebeccapurple;
Text shadow practice #
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本阴影</title>
<style>
div{
font-size: 60px;
color: seagreen;
text-shadow: 1px 2px 3px red;
}
</style>
</head>
<body>
<div>微笑是最初的信仰，加油。</div>
</body>
</html>
Introduce elements of shadow #
- In
CSSuse box-shadowattribute of the element shading.
box-shadowDescribes the attribute values: a first value is set shadow horizontal direction, perpendicular to the second direction value is set, the third value is set shadow definition, the fourth value is set size of the shadow, the fifth value is set the shadow color, the sixth position of the shadow value is set outside the default shadow positions, insetdisposed in the interior of the shadow.box-shadowProperty value may be a negative number.box-shadowA plurality of shadow property value can be set, separated by commas.Elements of shadow practice #
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素阴影</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid red;
box-shadow: 3px 6px 8px darkblue ,4px 8px 6px rebeccapurple inset;
}
</style>
</head>
<body>
<div>微笑是最初的信仰，加油。</div>
</body>
</html>
