How to set border shadow effect in css-CSS Tutorial-php.cn

How to set border shadow effect in css

青灯夜游

Release： 2023-01-06 11:14:12

Original

13511 people have browsed it

In CSS, you can use the box-shadow attribute to add one or more shadows to the border and set the border shadow effect. The syntax format is "box-shadow: horizontal shadow vertical shadow blur radius extended radius shadow color inset "; The inset value is used to change the outer shadow to the inner shadow and can be omitted.

How to set border shadow effect in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the box-shadow attribute to achieve border shadow effects. This property sets the shadow's pixel length, width, and blur distance as well as the shadow's color.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Copy after login

Rendering:

How to set border shadow effect in css

##Description:

The box-shadow property 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.

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

Copy after login

Attribute value:

h-shadow: refers to the shadow horizontal offset, its value can be positive or negative, positive Value, the shadow is on the right side of the object, negative value, the shadow is on the left side of the object
v-shadow: refers to the vertical offset of the shadow, and its value can also be positive or negative. , a positive value, the shadow is at the bottom of the object, a negative value, the shadow is at the top of the object
blur: shadow blur radius; this parameter is optional and can only be positive if When its value is 0, it means that the shadow has no blur effect. The larger the value, the blurr the edge of the shadow.
spread: shadow expansion radius; this parameter is optional, and its value can be positive Negative value, positive value, the entire shadow will be expanded, otherwise, it will be reduced.
color: shadow color; this parameter is optional. When no color is set, the browser will choose The default color, but the default color of each browser is different, especially the safari and chrome browsers under the webkit kernel will be colorless, that is, transparent. It is recommended not to omit this parameter
inset : Sets the inner shadow to change the shadow from the outer shadow (at the beginning); optional value, can be omitted.

Note: **Multiple layers of shadows, the innermost layer has the highest priority, and then decreases in sequence.

(Learning video sharing:

css video tutorial)

The above is the detailed content of How to set border shadow effect in css. For more information, please follow other related articles on the PHP Chinese website!