Detailed Example of CSS3 box-shadow Property

CSS3 -- Adding shadows (using box shadows)

CSS3 - Add shadow to div or text (use of box shadow, text shadow)

CSS3 defines two kinds of shadows: box shadows and text shadows. Box shadows require IE9 or later, while text shadows require IE10 or later. The following describes the use of box-shadow shadows:

1. Box shadow box-shadow

The box-shadow property adds one or more shadows to a box.

grammar:

box-shadow: offset-x offset-y blur spread color inset;
ox-shadow: X-axis offset Y-axis offset [shadow blur radius] [shadow extension] [shadow color] [projection method];

Word explanation: blur: blur, spread: stretch, inset: concave

Parameter explanation:

offset-x: Required, can be positive or negative. offset-x The horizontal shadow position.
offset-y: Required, can be positive or negative. offset-y The vertical shadow position.
blur: optional, can only take positive values. blur-radius is the blur radius of the shadow. 0 means no blur effect. The larger the value, the blurrier the shadow edge.
spread: optional, can be positive or negative. Spread represents the size of the shadow's circumference extending to the surrounding areas. Positive values expand the shadow, and negative values shrink the shadow.
color:Optional. The color of the shadow. If not set, the browser will use the default color, usually black, but the default colors of each browser are different, so it is recommended not to omit it. It can be either rgb(250,0,0) or rgba(250,0,0,0.5) with a transparent value.
inset:Optional. Keyword, changes the external projection (default outset) to internal projection. inset The shadow is above the background and below the content.

Note: inset can be written as the first or last parameter, and is invalid at other positions.

2. Use of box-shadow

1. Shadows can also appear when the horizontal and vertical offsets are 0

If the offset-x or offset-y value is 0, the shadow is behind the element. In this case, giving a blur-radius value or a spread value can produce a shadow effect.

example:

The first div creates a shadow effect by setting blur-radius.

The second div creates a shadow effect by setting a positive spread value.

The third div creates a shadow effect by setting the spread to a negative value.

But there is one thing to note: extended shadows must be used in conjunction with shadow blur radius.

Personally, I think there is no such thing as using them together, but it is impossible to only set the extended shadow, because the values of the extended shadow and the shadow blur can both be positive. If only the extended shadow is used, it will be interpreted by the browser as a blurred shadow, so it can be simply understood as "extended shadow must be used in conjunction with the shadow blur radius". If only the extended shadow is used, it can be written as: box-shadow:0 0 0 1px;.

<style>
      div{
            width: 100px;
            height: 100px;
            margin:50px;
            border: 10px dotted red;
            display: inline-block;
    }
    .blur{
            box-shadow: 0 0 20px ;
            /*box-shadow: 0 0 20px green;*/ /*You can also customize the color*/
    }  
    .spread-positive{
            box-shadow: 0 0 20px 5px ;
            /* box-shadow: 0 0 20px 5px green;*/ /*You can also customize the color*/
    }
    .spread-negative{
            box-shadow: 0 0 20px -5px ;
            /* box-shadow: 0 0 20px -5px green;*/ /*You can also customize the color*/
    }
    </style>
</head>
<body>
    <div class="blur"></div>
    <div class="spread-positive"></div>
    <div class="spread-negative"></div>
</body>

insert image description here

2. Set the horizontal and vertical offsets to get the shadow effect

Outset case: The horizontal and vertical offsets are 0, but blur and spread are not set, so the shadow cannot be seen. Because the perimeter of box-shadow is the same as border-box, the shadow can be displayed by setting the offset.

Inset case: the horizontal and vertical offsets are 0, blur and spread are not set, and the shadow is still not visible, because the perimeter of box-shadow is the same as padding-box, and the shadow can also be displayed by setting the offset.

example:

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
}
.shadow0{box-shadow: 0 0;}  
.shadow1{box-shadow: 1px 1px;}
.shadow10{box-shadow: 10px 10px;}
.inset-shadow0{box-shadow: 0 0 inset;}  
.inset-shadow1{box-shadow: 1px 1px inset;}
.inset-shadow10{box-shadow: 10px 10px inset;}
</style>
<body>
    <div class="shadow0"></div>
    <div class="shadow1"></div>
    <div class="shadow10"></div>
    <div class="inset-shadow0"></div>
    <div class="inset-shadow1"></div>
    <div class="inset-shadow10"></div>
</body>

insert image description here

3. Projection method

The default projection mode is outset, which means external projection. You can set inset to project inward.

Example: The first div has the default outset, the second has the inset, the third has both shadows set to better show the relationship between outset and inset, and the fourth div has the inset shadow above the background and below the content.

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
    vertical-align: top;
} 
.outset{
    box-shadow: 10px 10px teal;
}
.inset{
    box-shadow: 10px 10px teal inset;    
}
.double{
    box-shadow: 10px 10px teal inset,10px 10px teal;
}
.bg{
    background-color: yellow;
}
</style>
<body>
    <div class="outset"></div>
    <div class="inset"></div>
    <div class="double"></div>
    <div class="inset bg">Inset shadow above the background, below the content</div>
</body>

insert image description here

4. If the element also specifies the border-radius property, the shadow has the same rounded corners.

<style type="text/css">
 div{
 width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
    border-radius: 50px;
 }
.shadow{
    box-shadow: 0 0 10px 10px green;
}
</style>
<body>
<div class="shadow"></div>
</body>

insert image description here

5. Classic Examples

An example from w3c. http://www.w3.org/TR/css3-background/#the-box-shadow

insert image description here

visible:

border-radius will affect the shadow shape in the same way
border-image, padding will not affect any shape of the shadow
Shadow box is the same as box model
The outer shadow is below the object's background, and the inner shadow is above the background.
Hierarchy: Content > Inner Shadow > Background Image > Background Color > Outer Shadow

6. Multiple shadows

This effect has been seen above, and now I will add some more content.

Syntax: You can set any number of shadows, separated by commas.

When a box has multiple shadows, you need to pay attention to the order: multiple shadows are distributed from top to bottom, with the first shadow at the top.

Example: One-sided shadow effect

Let me explain first: you can set the shadow of the left border, the shadow of the right border, the shadow of the top border, and the shadow of the bottom border separately. In fact, it is correct to say this, because the effect looks like this, but the fundamental reason is that the shadow is behind the box, it just changes the position of the shadow, and the shadows of the other three sides still exist, they are just covered. Therefore, setting the shadow of a certain side is a very vague thing. Alas, this statement on the Internet still confused me at first, so I said it is a unilateral shadow effect here to tell you that it is just an effect, and it is still a box in essence.

Example explanation: Set the top, right, bottom and left borders of the first div to red, orange, yellow and green colors respectively, then the red-shadow is at the top layer and the green-shadow is at the bottom layer, as shown in the left figure below.

Adding a blur radius to it makes the effect more obvious. As shown in the figure below, the blur radius of red-shadow is not affected because it is on the top layer; the orange-shadow is next and is affected by the radius of red-shadow; the yellow-shadow is affected by the radius of orange-shadow and red-shadow; similarly, the green-shadow is affected by the radius of all the shadows above it.

If you still don’t understand, then set a large radius for red-shadow, such as 50, and you can see a very obvious effect, as shown in the right figure below.

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    margin:50px;
    display: inline-block;
    border: 10px dotted pink;
}
.shadow{
    box-shadow: 0 -5px red,
    5px 0 orange,
    0 5px yellow,
    -5px 0 green;
}
.blur-shadow{
    box-shadow: 0 -5px 5px red,
    5px 0 5px orange,
    0 5px 5px yellow,
    -5px 0 5px green;
}
.big-redShadow{
    box-shadow: 0 -5px 50px red,
    5px 0 5px orange,
    0 5px 5px yellow,
    -5px 0 5px green;
}
</style>
<body>
    <div class="shadow"></div>
    <div class="blur-shadow"></div>
    <div class="big-redShadow"></div>
</body>

insert image description here

7. Shadows and layout

Shadows do not affect layout, but may cover other boxes or shadows of other boxes.

The shadow does not trigger scrollbars and does not increase the size of the scrolling area.

So shadows can be ignored during layout.

8. Use spread

Use spread to simulate border

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    display: inline-block;
    margin:10px;
    vertical-align: top;
}
.border{
    border:1px solid red;
}
.spread{
    box-shadow: 0 0 0 1px red;
}
.muli-border{
    box-shadow: 0 0 0 2px red,0 0 0 4px green,0 0 0 6px blue;
}
</style>
<body>
    <div class="border">border</div>
    <div class="spread">box-shadow</div>
    <div class="muli-border">Multiple<br/>box-shadow</div>

insert image description here

Using spread to implement two-color square brackets

<style type="text/css">
.decorator {
width: 300px;
height: 100px;
padding: 30px;
box-shadow: -30px -30px 0 -25px red,30px 30px 0 -25px green; 
}
</style>
<body>
<div class="decorator">Paragraph content: Use box-shadow to simulate two-color square brackets box-shadow: -24px -24px 0 -20px red,24px 24px 0 -20px green; </div>
</body>

insert image description here

Summarize

This is the end of this article about the detailed explanation of CSS3 box-shadow property. For more relevant CSS3 box-shadow property content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Implementation of removing overlapping time and calculating time difference in MySQL

>>: Introduction to the Enctype attribute of the Form tag and its application examples