Home >Web Front-end >CSS Tutorial >What is the function of the box-shadow attribute
What is the function of the box-shadow attribute
- 青灯夜游Original
- 2019-01-30 13:27:287607browse
box-shadow is a property in CSS3, which is used to add one or more shadows to the box and set the shadow position, size, color, etc.
CSS3 box-shadow property
Function: box-shadow is used To add a shadow to a box
Basic syntax:
box-shadow: h-shadow v-shadow blur spread color inset;
Parameters:
h-shadow: The position of the horizontal shadow . Negative values are allowed.
v-shadow: The position of the vertical shadow. Negative values are allowed.
blur: blur distance, can be omitted.
spread: The size of the shadow, can be omitted.
color: The color of the shadow, can be omitted.
inset: Change the outer shadow (outset) to an inner shadow, which can be omitted.
Description: box-shadow adds one or more shadows to the box. This property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color value, and the optional inset keyword. The value for omitted length is 0.
css3 box-shadow attribute usage example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
margin: 100px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of What is the function of the box-shadow attribute. For more information, please follow other related articles on the PHP Chinese website!