Home > Article > Web Front-end > How to cancel the shadow of css3 border
How to cancel the shadow of css3 border
- WBOYOriginal
- 2022-06-14 15:27:143309browse
In CSS3, you can use the "box-shadow" attribute to cancel the shadow on the border. This attribute is used to set one or more drop-down shadow boxes. Just set the value of this attribute to "none". You can cancel the border shadow of the element. The syntax is "element {box-shadow: none;}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to cancel the shadow of the css3 border
The box-shadow property can set one or more drop-down shadow boxes.
box-shadow: h-shadow v-shadow blur spread color inset;
Note: The boxShadow property adds one or more drop-down shadows to the box. This property is a comma-separated list of shades, each shade specified by 2-4 length values, an optional color value, and an optional inset keyword. The value for omitted length is 0.
h-shadow Required. The position of the horizontal shadow. Negative values allowed
#v-shadow Required. The position of the vertical shadow. Negative values allowed
blur Optional. Fuzzy distance
#spread Optional. The size of the shadow
#color is optional. The color of the shadow.
inset Optional. Change the shadow from the outer shadow (at the beginning) to the inner shadow
Example is as follows:
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body> Output result:
After setting none, the output result is:
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow:none;
}
</style>
</head>
<body>
<div></div>
</body>
(Learning video sharing: css video tutorial, html video tutorial )
The above is the detailed content of How to cancel the shadow of css3 border. For more information, please follow other related articles on the PHP Chinese website!