前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css中的box-shadow属性详解

css中的box-shadow属性详解

作者头像
小明爱学习
发布2020-07-27 14:32:59
1.4K0
发布2020-07-27 14:32:59
举报
文章被收录于专栏:smh的技术文章

相信大家对于box-shadow这个属性都应该很清楚,那就是给元素添加阴影的,今天我们就来详细的说一下这个属性。

首先来看语法:

代码语言:javascript
复制
box-shadow: h-shadow v-shadow blur spread color inset;

说明

h-shadow

必需的。水平阴影的位置。允许负值

v-shadow

必需的。垂直阴影的位置。允许负值

blur

可选。模糊距离

spread

可选。阴影的大小

color

可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset

可选。从外层的阴影(开始时)改变阴影内侧阴影

box-shadow最少为两个参数:即h-shadow和v-shadow,大家可以理解为x和y轴的概念。

向元素添加单个 box-shadow 效果时使用以下规则:

  • 当给出两个、三个或四个 <length>值时。
    • 如果只给出两个值, 那么这两个值将会被当作 <offset-x><offset-y> 来解释。
    • 如果给出了第三个值, 那么第三个值将会被当作<blur>解释。
    • 如果给出了第四个值, 那么第四个值将会被当作<spread>来解释。
  • 可选,inset关键字。
  • 可选,<color>值。

完整顺序

代码语言:javascript
复制
<shadow> = inset? && <length>{2,4} && <color>?

属性实例讲解

代码语言:javascript
复制
img{box-shadow:10px 10px}

这里只设置了必须的两个参数,设置阴影为10px,没有背景色则默认为黑色,注意这两个参数如果设置为负数,则是相反的方向出现阴影,如下:

代码语言:javascript
复制
img{box-shadow:-10px,-10px}

blur参数

此参数用来设置模糊距离,不能为负数。

代码语言:javascript
复制
img{box-shadow:-10px -10px 20px;}//设置blur为20px

spread参数

此参数用来设置阴影的大小。

代码语言:javascript
复制
img{
  box-shadow:-10px -10px 20px 20px;
}

color参数

此参数设置阴影的颜色。

代码语言:javascript
复制
img{
  box-shadow:-10px -10px 20px 20px gold;
}

inset参数

此参数设置阴影向内。

代码语言:javascript
复制
div{box-shadow:-10px -10px 20px 20px gold inset;}

注意内阴影对图片无效的,所以我用div代替。

实战

1.如果想要全部边缘都要阴影元素,直接把x和y设置为0即可。

代码语言:javascript
复制
div{box-shadow:0px 0px 20px 10px green;}

2.一个元素可应用多个阴影效果。

代码语言:javascript
复制
div{box-shadow:10px 10px 10px red,-10px -10px 10px green;}

3.镂空效果

html

代码语言:javascript
复制
<div class="shadow">
  <img src="http://www.sammh.com/dome/upload1/4921320615863570240730.jpeg"/>
  <div class="mark"><i></i></div>
</div>

css

代码语言:javascript
复制
.shadow{
  overflow: hidden;
  position: relative;
  width:400px;
}
img{
  width:400px;
}
.mark{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.mark i{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 60px;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4);
}

效果:

在线代码:https://codepen.io/jack-shangs/pen/mdVvOMz

如无作者授权,请勿转载。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020年07月23日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 相信大家对于box-shadow这个属性都应该很清楚,那就是给元素添加阴影的,今天我们就来详细的说一下这个属性。
  • 属性实例讲解
  • 实战
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档