Example of implementing shadow effect using css3-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Example of implementing shadow effect using css3

Nov 20, 2017 pm 05:14 PM

css css3

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: <horizontal> <vertical> <blur> <color>

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:

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

Copy after login

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 of this Website

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