Home > Article > Web Front-end > How to use box-shadow in CSS3 to create border shadow? (code tutorial)

How to use box-shadow in CSS3 to create border shadow? (code tutorial)

云罗郡主forward: 2018-10-23 16:59:352504browse

This article brings you how to use box-shadow in CSS3 to create border shadows? (Code tutorial) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Introduction to box-shadow property

Border shadow is a very common special effect.

Previously in CSS2.1, if you wanted to add a border shadow to an element (like the picture above), you could only do it through a background image.

In CSS3, we can easily add a shadow effect to an element using the box-shadow property.

Syntax:

box-shadow：x-shadow  y-shadow  blur  spread  color  inset;

Description:

(1) x-shadow: Set the position of the horizontal shadow (X axis), you can use negative values;

(2)y-shadow: Set the position of the vertical shadow (y-axis), you can use negative values;

(3)blur: Set the shadow blur radius;

(4)spread: Expand the radius and set the size of the shadow;

(5) color: Set the color of the shadow;

(6) inset: This parameter is not set by default. The default is outer shadow, inset means inner shadow.

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:5px 5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

The preview effect in the browser is as follows:

How to use box-shadow in CSS3 to create border shadow? (code tutorial)

##Horizontal shadow position x-shadow and vertical shadow position y-shadow

The attribute value of horizontal shadow position x-shadow and vertical shadow position y-shadow, the unit can be px, em or percentage, etc., negative values are allowed.

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:-5px -5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

The preview effect in the browser is as follows:

How to use box-shadow in CSS3 to create border shadow? (code tutorial)

The above is an explanation of how to use box-shadow in CSS3 to create a border shadow? (Code tutorial) full introduction, if you want to know more about

CSS3 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to use box-shadow in CSS3 to create border shadow? (code tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:lvyestudy.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to ensure that the width and height of the image on the page always maintain a ratio of 16:9Next article：How to ensure that the width and height of the image on the page always maintain a ratio of 16:9

See more

How to use box-shadow in CSS3 to create border shadow? (code tutorial)

Related articles