Css 简明教程
CSS - box-shadow Property
CSS 的 box-shadow 属性用于在元素周围添加阴影效果。可以添加一个或多个阴影效果,并用逗号分隔。
The box-shadow property of CSS is useful in adding a shadow effect around an element. One or more shadow effects can be added, separated by commas.
框阴影由相对于元素的 X 和 Y 偏移、模糊、扩展半径和颜色描述。
The box shadow is described by X and Y offsets relative to the element, blur, spread radius and color.
Possible Values
-
inset: Shadow is assumed to be a drop shadow, if no value is specified. If inset is used, the shadow is drawn inside the border, above the background, but below content.
-
<offset-x>: Specifies the horizontal distance in <length> terms. Negative value positions the shadow to the left of element.
-
<offset-y>: Specifies the vertical distance in <length> terms. Negative value positions the shadow above the element.
-
<blur-radius>: Sets the radius for the blur effect. Third <length> value. Larger the value, bigger is the blur. Negative values are not allowed. In absence of a value, it is 0, which makes the edges of shadow sharp.
-
<spread-radius>: Sets the size of the shadow. Fourth <length> value. Positive values make the shadow to grow bigger. Negative values make the shadow to shrink. In absence of a value, it is 0, which makes the shadow of size same as the element.
-
<color>: Color values for possible keywords and color notations, such as, color name, hex value, rgb, etc.
CSS box-shadow - inset Value
这是一个示例:
Here is an example:
<html>
<style>
div {
margin: 4em;
padding: 1em;
height: 80px;
width: 80px;
display: inline-block;
}
#a {
box-shadow:10px 10px 10px 2em #f4aab9;
}
#b {
box-shadow:inset -20px -3em 3em rgba(228, 228, 35, 0.8);
}
#c {
box-shadow: 5px 15px 3px rgb(226, 67, 228);
border: 1px solid black;
}
</style>
<head>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>