CSS3知识汇总6：盒阴影box-shadow

【外部阴影：阴影在盒子外】

1）两个长度参数：表示阴影在水平方向和垂直方向的偏移量，偏移量是按相对元素左上角计算的，若水平值和垂直值均为正，则阴影在元素的右下方

div{margin:20px;float:left;}

.div1{

    width: 10em;

    height: 6.5em;

    border:1px solid black;

    background-color: white;

    box-shadow: 1em 1em gray;

}

/*颜色值是可选项，若缺少此项，则取curentColor的值

2）3个长度参数，表示阴影的模糊半径，对阴影的外边缘进行模糊处理

半径越长，则越模糊

实际上是从阴影边缘以阴影颜色开始向周围绘制渐变色，直到模糊半径指定的位置为透明色为止

.div2{

    width: 10em;

    height: 6.5em;

    border:1px solid black;

    background-color: white;

    box-shadow: 1em 1em 1em hsla(0, 0%, 0%, 0.3);

}

3）4个长度参数：表示阴影的扩散半径

当无此参数或此参数值为0时，表示阴影的尺寸和元素的尺寸相等

如果扩散半径大于0，则阴影的尺寸在元素原尺寸基础上扩大，扩大的长度即是扩散半径的大小

如果扩散半径小于0，则阴影的尺寸在元素原尺寸基础上缩小

.div3{

    width: 10em;

    height: 6.5em;

    border:1px solid black;

    background-color: white;

    box-shadow: 1em 1em 0 0.5em gray;

}

/*如果把水平和垂直偏移量为0，则会像一个边框*/

.div4{

    width: 10em;

    height: 6.5em;

    border:1px solid black;

    background-color: white;

    box-shadow: 0 0 0 0.5em gray;

}

/*前5个元素的阴影均未设置模糊半径，但又同时设置了模糊半径和扩散半径，形成浮起状态*/

.div5{

    width: 10em;

    height: 6.5em;

    border:1px solid black;

    background-color: white;

    box-shadow: 0 0 2em 0.3em hsla(0, 0%, 0%, 0.3);

}

【内部阴影：阴影在盒子内(即描绘向物品自身的投影)】

添加inset关键字

.div6{

    width: 10em;

    height: 6.5em;

    border:1px solid black;

    background-color: white;

    box-shadow: inset 0.5em 0.5em gray;

}

/*增加半径的内部阴影效果*/

.div7{

    width: 10em;

    height: 6.5em;

    border:1px solid black;

    background-color: white;

    box-shadow: inset 0 0 1em gray;

}

/*增加扩散半径的内部阴影效果*/

.div8{

    width: 10em;

    height: 6.5em;

    border:1px solid black;

    background-color: white;

    box-shadow: inset 0 0 0 0.5em gray;

}

注：如果不设置某个长度值，要在它的位置补0

阴影颜色和inset可写在做任意位置，只要不在4个长度值之中即可

【多重阴影】

.div9{

    width: 30em;

    height: 20em;

    background-color: lightyellow;

    border:2em solid burlywood;

    border-radius: 3em;

    box-shadow:

        inset 0.4em 0.4em 0.1em 0.5em hsla(0, 0%, 0%, 0.4),

        0 0.3em 2em 0.4em hsla(0, 0%, 0%, 0.3);

}

【利用box-shadow复制新元素】

.cross{

    font-size: 60px;

    width: 1em;

    height: 1em;

    color:orange;

    border-radius: 50%;

    border:1px dashed black;

}

.cross:nth-child(1){

    box-shadow:

        1.1em 0em,

        0em 1.1em,

        1.1em 1.1em,

        2.2em 1.1em,

        1.1em 2.2em;

}

.cross:nth-child(2){

    background-color: currentColor;

    box-shadow:

        0em -1.1em 0 -0.1em tomato,

        -1.1em 0em 0 0.2em gold,

        1.1em 0em 0 0.2em gold,

        0em 1.1em 0 0.1em;

}

【形状阴影函数drop-shadow()】

与box-shadow的区别：

box-shadow只能绘制1个元素的阴影

drop-shadow()能绘制一个容器内多个元素组合形成的图案阴影

4个参数：水平偏移量、垂直偏移量、模糊半径和颜色

注：不能绘制内阴影，阴影的尺寸与本体保持一致

.qq{

    font-size: 10px;

    box-sizing: border-box;

    width: 20em;

    height: 22em;

    color: orange;

    border: 3em solid;

    border-radius: 50%;

    position: relative;

}

.qq::before{

    content:'';

    position: absolute;

    width: 10em;

    height: 5em;

    top:11em;

    left:9em;

    background-color: currentColor;

    border-radius: 50%;

    transform: rotate(45deg);

}

/*复制*/

.qq{

    filter: drop-shadow(21em 0);

    /*background-color: white;*/

}