专栏首页smh的技术文章css中的box-shadow详解
原创

css中的box-shadow详解

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

首先来看语法:

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>值。

完整顺序

<shadow> = inset? && <length>{2,4} && <color>?

属性实例讲解

img{box-shadow:10px 10px}

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

img{box-shadow:-10px,-10px}

blur参数

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

img{box-shadow:-10px -10px 20px;}//设置blur为20px

spread参数

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

img{
  box-shadow:-10px -10px 20px 20px;
}

color参数

此参数设置阴影的颜色。

img{
  box-shadow:-10px -10px 20px 20px gold;
}

inset参数

此参数设置阴影向内。

div{box-shadow:-10px -10px 20px 20px gold inset;}

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

实战

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

div{box-shadow:0px 0px 20px 10px green;}

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

div{box-shadow:10px 10px 10px red,-10px -10px 10px green;}

3.镂空效果

html

<div class="shadow">
  <img src="http://www.sammh.com/dome/upload1/4921320615863570240730.jpeg"/>
  <div class="mark"><i></i></div>
</div>

css

.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);
}

效果:

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

登录 后参与评论
0 条评论

相关文章

  • css中的box-shadow属性详解

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

    小明爱学习
  • CSS中的定位详解

    含义:采用绝对定位的元素在移动位置的时候是以父元素为参照物的,但是这个父元素必须满足一定的条件才能成为绝对定位元素眼里的父元素。

    阿年、嗯啊
  • CSS中的BFC详解

    一、何为BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是...

    lesM10
  • 【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

    Sb_Coco
  • 从浅到深的学习 CSS3阴影(box-shadow)

    知识点: 1、外 box-shadow 前四个参数:x 偏移值、y 偏移值 、模糊半径、扩张半径。 2、单侧投影的核心是第四个参数:扩张半径。这个参数会根据...

    Javanx
  • css中的&

    阿超
  • 详解CSS的Flex布局

    Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式。通过Flex布局,可以很优雅地解决很多CSS布局的问题。下面会分别介绍容...

    前端林子
  • css的position定位详解

    iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

    十月梦想
  • 第93天:CSS3 中边框详解

    其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。

    半指温柔乐
  • css中的单位

    前端开发中, 做适配是少不了的, 即页面在各种尺寸的机型中显示效果一样, 这就用到了css中的各种长度单位, 做一下总结

    烟草的香味
  • css中的attr

    attr一词语原意思为attribute即为属性。 在js中会用到attr,另外一个属性为prop 至于attr与prop的区别,可以自行Google 今天要说...

  • 第98天:CSS3中transform变换详解

    Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动transla...

    半指温柔乐
  • 第100天:CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

    半指温柔乐
  • css opacity属性_CSS中的opacity属性[通俗易懂]

    With the growing need of making websites, the need for styling them has also inc...

    全栈程序员站长
  • css的radial-gradient大详解

    贵哥的编程之路
  • CSS中Fixed的属性

    下面这个小demo演示一下fixed与父级子级同级的效果展示 这三个div都是【fixed】属性,但你会发现父级的zindex这时压根没盖过子级的z-index...

扫码关注腾讯云开发者

领取腾讯云代金券