Home > Article > Web Front-end > Detailed explanation on the use of box-shadow attribute in CSS3

Detailed explanation on the use of box-shadow attribute in CSS3

黄舟Original: 2017-07-26 14:39:172258browse

Every time you use box-shadow, you have to consult the information to achieve the corresponding effect. Let’s summarize it now for easy reference in the future.

1. Grammar:

## E {box-shadow: inset x-offset y-offset blur-radius spread-radius color}; E {box-shadow: Projection method ：

1. Shadow type: This parameter is optional. The default projection method is outer shadow; if the only value "inset" is taken, the outer shadow will be changed into inner shadow;

2. Y-offset: refers to the vertical offset of the shadow. Its value can also be positive or negative. For positive values, the shadow is at the bottom of the object. For negative values, the shadow is at the top of the object; 4. Shadow Blur radius: This parameter is optional and can only be positive. If its value is 0, it means that the shadow does not have a blur effect. The larger the value, the blurr the edge of the shadow;

5. Shadow expansion radius : This parameter is optional, and its value can be positive or negative. If it is a positive value, the entire shadow will be expanded, otherwise, it will be reduced.

6. Shadow color: This parameter is optional. When no color is set, , the browser will take 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.

Compatible browser writing method

<span style="color: #800000;"><span style="color: #000000;">//Firefox4.0-</span><br/><span style="color: #ff6600;">-moz-box-shadow:</span> <span style="color: #000000;">投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;</span><br/><span style="color: #000000;">//Safari and Google chrome10.0-</span><br/><span style="color: #ff6600;">-webkit-box-shadow:</span> <span style="color: #000000;">投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;</span><br/><span style="color: #000000;">//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9</span><br/><span style="color: #ff6600;">box-shadow:</span>  <span style="color: #000000;">投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;</span></span>

box- Like text-shadow, shadow can use one or more projections. If multiple projections are used, they must be separated by commas ",".

IE filter simulates box-shadow shadow effect

Basic syntax: filter:progid:DXImageTransform.Microsoft.Shadow(color='color value', Direction =Shadow angle (numeric value),Strength=Shadow radius (numeric value));

Note

: 1. This filter must be used together with the background attribute, otherwise the The filter is invalid;

2. The color attributes in the filter must be written completely, and abbreviations cannot be used;

3. The shadow of the filter is calculated within the width and height;

4. Under the box shadow, The box will automatically add overflow:hidden;

5. Commonly used shadow implementation code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>box-shadow的用法</title>
    <style type="text/css">
        p{
            width:60px;
            height:60px;
            margin:40px auto;
            background-color: grey;
        }
        /*右下阴影*/
        .box-shadow-1{
            -webkit-box-shadow: 3px 3px 3px;
            -moz-box-shadow: 3px 3px 3px;
            box-shadow: 3px 3px 3px;
        }
        /*四边同色阴影*/
        .box-shadow-2{
            -webkit-box-shadow:0 0 10px #0CC;
            -moz-box-shadow:0 0 10px #0CC;
            box-shadow:0 0 10px #0CC;
        }
        /*四边同色阴影扩展*/
        .box-shadow-3{
            -webkit-box-shadow:0 0 10px 15px #0CC;
            -moz-box-shadow:0 0 10px 15px #0CC;
            box-shadow:0 0 10px 15px #0CC;
        }
        /*四边同色内阴影*/
        .box-shadow-4{
            -webkit-box-shadow:inset 0 0 10px #0CC;
            -moz-box-shadow:inset 0 0 10px #0CC;
            box-shadow:inset 0 0 10px #0CC;
        }
        /*四边异色外阴影*/
        .box-shadow-5{
            box-shadow:-10px 0 10px red, /*左边阴影*/
            10px 0 10px yellow, /*右边阴影*/
            0 -10px 10px blue, /*顶部阴影*/
            0 10px 10px green; /*底边阴影*/
        }
        /*叠加异色阴影*/
        .box-shadow-6{
            box-shadow:0 0 10px 5px black,
            0 0 10px 20px red;
        }
        /*类border边框效果（只设置阴影扩展半径和阴影颜色）*/
        .box-shadow-7{
            box-shadow: 0 0 0 1px red;
        }
        /*兼容ie*/
        .box-shadow{
            filter: progid:DXImageTransform.Microsoft.Shadow(color=&#39;#969696&#39;,Direction=135, Strength=5);/*for ie6,7,8*/
            background-color: #ccc;
            -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
            -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
            box-shadow:2px 2px 5px #969696;/*opera或ie9*/
        }
    </style></head><body><p class="box-shadow-1"></p><p class="box-shadow-2"></p><p class="box-shadow-3">
    </p><p class="box-shadow-4"></p><p class="box-shadow-5"></p><p class="box-shadow-6"></p><p class="box-shadow-7">
    </p><p class="box-shadow"></p></body></html>

The specific effect is shown in the figure below ：

The above is the detailed content of Detailed explanation on the use of box-shadow attribute in CSS3. 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

Previous article：Detailed example of how to use text-transform in CSS to convert letter casesNext article：Detailed example of how to use text-transform in CSS to convert letter cases

See more

Detailed explanation on the use of box-shadow attribute in CSS3

Related articles