• css实现元素四周阴影


    前言

    首先确定的是需要使用box-shadow这一属性

    语法如下:

    box-shadow: h-shadow v-shadow blur spread color inset;

    • h-shadow:表示水平方向上的阴影偏移量,必须指明,可以是正数、负数、0,如果为正数左方有阴影,如果为负数右方有阴影,如果为0它位于元素的正中间。
    • v-shadow:表示垂直方向上的阴影偏移量,必须指明,可以是正数、负数、0,如果是正数则下方有阴影,如果是负数则上方有阴影,如果是0,则在元素正中间。
    • blur:表示阴影的模糊程度,可选项,可以是正数、负数。数值越大,阴影越模糊,反之阴影越清晰,如果值为0时表示完全清晰。
    • spread:表示阴影的扩张程度,可选项,可以是正数、负数。当扩张程度为正数时阴影扩张,而为负数时阴影收缩,如果值为0,则表示不改变阴影的扩张程度。
    • color:表示阴影的颜色,可以采用各种CSS支持的颜色格式进行设置,例如:RGB值,16进制值等等。
    • inset:表示是否要将阴影设置为内阴影,可以省略,如果指定了这个值则表示要将阴影设置为内阴影,否则为外阴影。

    实现四周阴影

    方法一:

    需要分别设置四周阴影,代码如下:

    div {
       width: 300px;
       height: 300px;
       box-shadow:
         5px 5px 5px #00000014,
         5px -5px 5px #00000014,
         -5px 5px 5px #00000014,
         -5px -5px 5px #00000014;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    效果

    在这里插入图片描述

    方法二:

    四周效果一致,只需控制第三个参数,注意前两个参数不能全为0

    div {
       width: 300px;
       height: 300px;
       box-shadow: 0 2px 12px 0 pink;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    效果

    在这里插入图片描述

  • 相关阅读:
    elastisearch开发时的发现
    Qt的线程(两种QThread类的详细使用方式)「建议收藏」
    Ubuntu配置NFS服务器(Linux挂载Linux)
    LVDS转换芯片,GM8284C数据手册!!!!
    Android:ChildHelper的Bucket
    遗传算法python
    我的面试(1年经验)
    深入理解Linux2.6内核中sys_mmap系统调用
    点云配准(四) Sparse Point Registration 算法浅析
    基于SSM的高校宿舍寝室管理系统
  • 原文地址:https://blog.csdn.net/owo_ovo/article/details/134395874