Home > Article > Web Front-end > Does css3 have a shadow effect?
There are shadow effects in css3; they are: 1. Text shadow effect, just use the "text-shadow" attribute, the syntax is "text-shadow: horizontal and vertical..."; 2. Shadow box effect, Just use the "box-shadow" attribute, the syntax is "box-shadow: horizontal and vertical...".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
1. The "text-shadow" attribute represents text shadow
The syntax is
text-shadow:水平阴影 垂直阴影 模糊程度 颜色
text The -shadow attribute connects one or more shadow text. The property is a shadow, specifying every 2 or 3 length values and an optional color value separated by commas. The expired length is 0.
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>注意:</b>IE 9及更早版本的浏览器不支持 text-shadow 属性.</p>
</body>
</html>Output result: 
2. "box-shadow" represents box shadow
The syntax is
box-shadow:水平阴影 垂直阴影 模糊距离 大小
The boxShadow property adds one or more drop-down shadows to the box. This property is a comma-separated list of shades, each shade specified by 2-4 length values, an optional color value, and an optional inset keyword. The value for omitted length is 0.
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of Does css3 have a shadow effect?. For more information, please follow other related articles on the PHP Chinese website!