CSS——box-shadow 的各个方向的阴影

Better宫
250 阅读2分钟

一、基本概念

​

原点为基点，原点左侧为x轴负方向，值为负，右侧为正；原点下方为y轴正方向，值为正，上方为负。

语法书写：box-shadow: 1px 2px 3px 4px #ccc inset；

以上六个值的含义：

  • 1px  x偏移量，从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）。
  • 2px  y偏移量，从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）。
  • 3px  模糊半径，模糊程度，值越大越模糊，只允许为正值；当模糊半径大于偏移量时，以大值为阴影区域。
  • 4px  扩展半径，真实的阴影区域的半径（宽度），为偏移量+扩展半径。
  • #ccc  阴影颜色，可设置多个值，用半角逗号隔开。
  • inset  设置为内阴影（如果不写这个值，默认为外阴影）。

二、实际效果

1、对比模糊度

模糊度体现的是阴影区的糊化程度，但是模糊度会影响阴影的范围。 下图右侧阴影20px，但是模糊度为50px时，阴影的宽度变了很多。

moHuDu.jpg

2、对比阴影扩展半径

模糊半径是在阴影X轴、Y轴阴影长度的基础上增加该半径的长度，即实际的X、Y轴的阴影长度为两者相加的结果。

当四个边或三个边需要设置阴影时，需要用到阴影扩展半径。

radius.jpg

3、四个边设置阴影

four.jpg

4、三个边设置阴影

three.jpg

5、两个边设置阴影

对立边

duiLi.jpg

相邻边

xiangLin.jpg

6、多色阴影

fourColor.jpg

三、完整源码，可直接运行使用

码上掘金代码片段直接运行

code.juejin.cn/pen/7261884…

完整源码

以下为完整html页面，效果图在最下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <title>box-shadow</title>
    <style>
        body {
            padding: 0px 20px;
        }
        .box-item {
            width: 300px;
            height: 120px;
            border: 1px solid #999;
            border-radius: 8px;
            margin-bottom: 60px;
        }
        /* 模糊度 */
        .outer {
            box-shadow: 20px 10px 0px 0px #ff8c1a;
        }
        .outer-moHuDu20 {
            box-shadow: 20px 10px 20px 0px #ff8c1a;
        }
        .outer-moHuDu50 {
            box-shadow: 20px 10px 50px 0px #ff8c1a;
        }
        /* 阴影半径 */
        .outer-radius10 {
            box-shadow: 20px 10px 0px 10px #ff8c1a;
        }
        .outer-radius20 {
            box-shadow: 20px 10px 0px 20px #ff8c1a;
        }
        /* 四个边设置阴影 */
        .outer-four10 {
            box-shadow: 0px 0px 0px 10px #ff8c1a;
        }
        .inner-four10 {
            box-shadow: 0px 0px 0px 10px #ff8c1a inset;
        }
        /* 三个边设置阴影 */
        .outer-three10 {
            box-shadow: 10px 0px 0px 10px #ff8c1a;
        }
        .inner-three10 {
            box-shadow: -10px 0px 0px 10px #ff8c1a inset;
        }
        /* 两个边设置阴影-对立边 */
        .outer-two-duiLi10 {
            box-shadow: 10px 0 red, -10px 0 0 blue;
        }
        /* 两个边设置阴影-相邻边 */
        .outer-two-xiangLin10 {
            box-shadow: -10px -10px 0px 0px #ff8c1a; /* 左上*/
            /* box-shadow: 10px -10px 0px 0px #ff8c1a; /* 右上 */
            /* box-shadow: 10px 10px 0px 0px #ff8c1a; /* 右下 */
            /* box-shadow: -10px 10px 0px 0px #ff8c1a; /* 左下 */
        }
        .inner-two-xiangLin10 {
            box-shadow: 10px 10px 0px 0px #ff8c1a inset; /* 左上（对应向外的右下）*/
            /* box-shadow: -10px 10px 0px 0px #ff8c1a inset; /* 右上 */
            /* box-shadow: -10px -10px 0px 0px #ff8c1a inset; /* 右下 */
            /* box-shadow: 10px -10px 0px 0px #ff8c1a inset; /* 左下 */
        }
        /* 多色阴影 */
        .outer-two-color-xiangLin10 {
            box-shadow: -10px 10px 0px 0px red, 10px -10px 0px 0px #ff8c1a;
        }
        .inner-two-color-xiangLin10 {
            box-shadow: -10px 10px 0px 0px red, 10px -10px 0px 0px #ff8c1a inset;
        }
        .inner-two-all-color-xiangLin10 {
            box-shadow: -10px 10px 0px 0px red inset, 10px -10px 0px 0px #ff8c1a inset;
        }
        .four-color {
            margin-top: 100px;
            box-shadow: -10px 0px 0px 0px blue, 
                0px -20px 0px 0px red, 
                30px 0px 0px 0px green, 
                0px 40px 0px 0px yellow;
        }
    </style>
</head>
<body>
    <h3>模糊度</h3>
    <div class="box-item outer">右侧阴影为20px</div>
    <div class="box-item outer-moHuDu20">右侧阴影约30px</div>
    <div class="box-item outer-moHuDu50">右侧阴影约50px</div>
    <h3>阴影半径</h3>
    <div class="box-item outer">右侧阴影为20px</div>
    <div class="box-item outer-radius10">右侧阴影为30px</div>
    <div class="box-item outer-radius20">右侧阴影为40px</div>
    <h3>四个边设置阴影</h3>
    <div class="box-item outer-four10">四个边设置阴影10px，向外</div>
    <div class="box-item inner-four10">四个边设置阴影10px，向内</div>
    <h3>三个边设置阴影</h3>
    <div class="box-item outer-three10">三个边设置阴影10px，向外</div>
    <div class="box-item inner-three10">三个边设置阴影10px，向内</div>
    <h3>两个边设置阴影-对立边</h3>
    <div class="box-item outer-two-duiLi10">
        两个边设置阴影-对立边10px，向外
    </div>
    <h3>两个边设置阴影-相邻边</h3>
    <div class="box-item outer-two-xiangLin10">
        两个边设置阴影-相邻边10px，向外
    </div>
    <div class="box-item inner-two-xiangLin10">
        两个边设置阴影-相邻边10px，向内
    </div>
    <h3>多色阴影</h3>
    <div class="box-item outer-two-color-xiangLin10">上、右——下、左</div>
    <div class="box-item inner-two-color-xiangLin10">上、右（向内）——下、左</div>
    <div class="box-item inner-two-all-color-xiangLin10">上、右——下、左（全部向内）</div>
    <div class="box-item four-color">单独设置每个边的阴影</div>
</body>
</html>
avatar
文章
阅读
粉丝