Home > Article > Web Front-end > css shadow effect: how to set css border shadow?

css shadow effect: how to set css border shadow?

不言Original: 2018-09-05 17:20:0610453browse

In the process of web design, we often need to set some special effects in the web page to make the designed web page look more beautiful. This article will introduce to you how to set a shadow effect for the border through css. The css shadow effect can be It will make the designed frame more three-dimensional. Without further ado, let’s take a closer look at how to set the CSS border shadow effect.

When we set the border shadow, an essential attribute is box-shadow. box-shadow can add one or more shadows to the box. Let's look at a specific example below.

<!DOCTYPE html>
<html>
<head>
<style> 
body{margin:30px;background-color:#E9E9E9;}
div.polaroid{width:294px;padding:10px 10px 20px 10px;border:1px solid #BFBFBF;background-color:green;
/* 设置阴影效果 */
box-shadow:5px 5px 6px #090;}
div.rotate_left
{float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);}
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="/i/ballade_dream.jpg" alt="郁金香" width="284"    style="max-width:90%" />
<p class="caption">鲜花郁金香，花名：Ballade Dream。</p>
</div>
</body>
</html>

The effect is as follows:

css shadow effect: how to set css border shadow?

#After adding a shadow effect to the frame, is it more three-dimensional and more beautiful (the color may not be very nice) , but you can choose a better-looking combination... ^@^)

Explanation: We see that in the above code, there are four attribute values behind box-shadow. What do they mean?

Let’s take a look at the meaning of the box-shadow attribute value. (Recommended: CSS Border Property Example)

box-shadow adds one or more shadows to the box.

This attribute is a comma-separated list of shadows. Each shadow is specified by 2-4 length values, optional color values, and the optional inset keyword. The value for omitted length is 0.

Value	Meaning
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow	Required. The position of the vertical shadow. Negative values are allowed.
blur	Optional. Fuzzy distance.
spread	Optional. The size of the shadow.
color	Optional. The color of the shadow.
inset	Optional. Change the outer shadow (outset) to an inner shadow.

After looking at the meaning of each attribute value, we can know the shadow effect set in the above example. The four attribute values after the box-shadow attribute are: h -shadow, v-shadow, blur, color.

There are many good-looking effects that can be achieved in css. If you want to know more about css shadow effects, you can refer to the CSS3 latest version reference manual on the php Chinese website

CSS3 The latest version of the reference manual

Related recommendations:

CSS3 input box shadow effect and other shadow effects_html/css_WEB-ITnose

css requires shadow effect_html/css_WEB-ITnose

CSS achieves shadow text effect_CSS/HTML

The above is the detailed content of css shadow effect: how to set css border shadow?. 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：What is a css selector? What types of css selectors are there?Next article：What is a css selector? What types of css selectors are there?

See more

css shadow effect: how to set css border shadow?

Related articles