首页 前端知识 【CSS】CSS实现元素四周阴影

【CSS】CSS实现元素四周阴影

2024-04-22 09:04:29 前端知识 前端哥 377 174 我要收藏

前言

首先确定的是需要使用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;
}

效果

在这里插入图片描述

方法二:

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

div {
   width: 300px;
   height: 300px;
   box-shadow: 0 2px 12px 0 pink;
}

效果

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5703.html
标签
评论
发布的文章

html生成简易打字游戏

2024-04-29 16:04:21

js正则提取网页url

2024-04-29 12:04:02

js获取图片原始宽高

2024-04-29 12:04:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!