Home > Article > Web Front-end > Example of implementing shadow effect using css3

Example of implementing shadow effect using css3

小云云Original: 2017-11-20 17:14:092345browse

CSS3 is an upgraded version of CSS technology, and CSS3 language development is developing towards modularity. The previous specification was too large and complex as a module, so it was broken down into smaller modules and more new modules were added. These modules include: box model, list module, hyperlink method, language module, background and border, text effects, multi-column layout, etc. In this chapter, we will tell you a simple CSS3 shadow effect example. You can use the shadow property of CSS3 to add a shadow effect to elements of a web page. This is a new feature. However, this feature only works on browsers that support CSS3, such as Firefox 3.5, Safari 3.1 +, and Google Chrome.

Let’s talk about how to use the shadow attribute of css3.

css3 shadow mainly uses the box-shadow attribute. The syntax format of this attribute is as follows:

box-shadow: f65652876579e614b30129b34738ac78 f73f7ffdfbb7c8af7c07304c34ca871c 8dbd294e4d69b8278cba78d29f0f8eb0 b10fb37415d019cfffa8c4d7366c607f

The above attribute values have the following meanings:

horizontal (horizontal): Specify the horizontal offset shadow. Positive values (ie: 5px) will shift the shadow to the right, while negative values (ie: - 10px) will bias it to the left.
vertical: Specifies a vertical offset shadow. Positive values (ie: - 5px) will make the shadow at the bottom of the box, while negative values (ie: - 10px) will bias it upwards.
blur (blur): Set the softening radius. The default value is 0, which means no blur. Positive values increase blur, while negative values actually shrink shadows. This property defaults to 0.
clolor (color): color value, that is, setting the shadow color.

Reminder: This attribute can be added to any element, such as pictures, Div, SPAN, P tags, etc.

Let’s look at a specific shadow example. The following is an example of the effect and the specific code:

<html xmlns="http://www.phpernote.com/">
<head>
<title>CSS3阴影效果实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#shadow {
box-shadow: 10px 10px 5px #888888;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
margin:0 auto;
color:#ffffff;
}
</style>
</head>
<body>
<div id="shadow">矩形的 CSS3 的阴影</div>
</body>
</html>

The above is a simple tutorial on css3, I hope it can help everyone.

Related recommendations:

CSS3 tips for drawing various basic graphics

Detailed examples of CSS3 custom scroll bar styles

Realization of circular motion trajectory in css3 animation

The above is the detailed content of Example of implementing shadow effect using css3. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Several points to pay attention to in css layoutNext article：Several points to pay attention to in css layout

See more

Example of implementing shadow effect using css3

Related articles