Home > Article > Web Front-end > How to set css border shadow
How to set css border shadow
- 藏色散人Original
- 2021-04-12 14:57:512669browse
In CSS, you can set one or more drop-down shadow boxes through the box-shadow attribute. The usage syntax of this attribute is such as "box-shadow:Xpx Ypx Zpx #888888;", where X represents the horizontal shadow, Y represents vertical shadow, Z represents gradient effect, and "#888888" represents shadow color.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
CSS Set Border Shadow Effect
The box-shadow property can set one or more drop-down shadow boxes.
box-shadow: Xpx Ypx Zpx #888888;
X: Horizontal shadow (offset value)
Y: Vertical shadow (offset value)
Z: Gradient effect
#888888: Shadow color
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 12px 12px 500px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>[Recommended learning: css video tutorial】
The above is the detailed content of How to set css border shadow. For more information, please follow other related articles on the PHP Chinese website!