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

Home

Web Front-end

CSS Tutorial

How to set border shadow effect in css

青灯夜游

May 19, 2021 pm 01:54 PM

css

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>

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;

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles