html中如何出现三重阴影,探索 CSS3 中的 box-shadow 属性
原标题:探索 CSS3 中的 box-shadow 属性
(点击上方公众号,可快速关注)
原文:Ire Aderinokun
译文:伯乐在线专栏作者 - 年迈的程序猿
链接:http://web.jobbole.com/87938/
挖掘你之前未曾见过的一些应用。
“box-shadow”属性
box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度(第三维)的错觉。
语法
box-shadow属性接收一个由5个部分组成的值
box-shadow: offset-x offset-y blur spread color position;
不像 border 等属性值可以拆分成子属性,box-shadow 属性是独立的。这意味着记录下属性值的顺序更加重要,特别是长度值。
offset-x
第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边,而负值使阴影出现在元素的左边。
.left{box-shadow:20px0px10px0pxrgba(0,0,0,0.5)}
.right{box-shadow: -20px0px10px0pxrgba(0,0,0,0.5)}
offset-y
第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的上边,而负值使阴影出现在元素的下边。
.left{box-shadow:0px20px10px0pxrgba(0,0,0,0.5)}
.right{box-shadow:0px-20px10px0pxrgba(0,0,0,0.5)}
blur
第三个长度值代表阴影的模糊半径,举例说明,就像你在设计软件中使用高斯模糊滤镜。0值意味着阴影是完全实心和尖锐的,没有任何模糊。模糊数值越大,尖锐度越小,阴影越朦胧和模糊。负值是不被允许的,并会被处理成0。
.left{box-shadow:0px0px0px0pxrgba(0,0,0,0.5)}
.middle{box-shadow:0px0px20px0pxrgba(0,0,0,0.5)}
.right{box-shadow:0px0px50px0pxrgba(0,0,0,0.5)}
spread
第四个,同时也是最后一个长度值代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。
.left{box-shadow:0px0px20px0pxrgba(0,0,0,0.5)}
.middle{box-shadow:0px0px20px20pxrgba(0,0,0,0.5)}
.right{box-shadow:0px50px20px-20pxrgba(0,0,0,0.5)}
color
颜色值,正如你期望的,是阴影的颜色。它可以是任何颜色单位。(参考 Working with Colour in CSS)
.left{box-shadow:0px0px20px10px#67b3dd}
.right{box-shadow:0px0px20px10pxrgba(0,0,0,0.5)}
position
box-shadow属性的最后一个值是一个可选的关键字,它代表着阴影的位置。默认情况下,这个值并而没有给出,这意味着阴影是一个外部阴影。我们能通过关键字inset使阴影变成内部阴影。
.left{box-shadow:20px20px10px0pxrgba(0,0,0,0.5)inset}
.right{box-shadow:20px20px10px0pxrgba(0,0,0,0.5)}
多重阴影
box-shadow 属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。
.foo{
box-shadow:20px20px10px0pxrgba(0,0,0,0.5)inset,/* inner shadow */
20px20px10px0pxrgba(0,0,0,0.5);/* outer shadow */
}
圆形阴影
box-shadow 属性的边界半径是通过该元素的 border-radius 属性来控制的。
.foo{
box-shadow:20px20px10px0pxrgba(0,0,0,0.5);
border-radius:50%;
}
把它们放在一起
把所有的部分放在一起,我们能通过使用box-shadow属性创造出一些奇妙的效果。
一种非布局模块边界的替代品
我们可以使用box-shadow属性来创建一种元素,这种元素是边界环绕的,但是它不干扰盒子模型或者页面上面的其他布局。更有甚者,用它来创造出多个阴影,我们可以在元素不同的边上拥有不同样式的边界。
.simple{
box-shadow:0px0px0px40pxindianred;
}
.multiple{
box-shadow:20px20px0px20pxlightcoral,
-20px-20px0px20pxmediumvioletred,
0px0px0px40pxrgb(200,200,200);
}
弹出效果
在box-shadow(和transform)属性上进行变形,我们能创造出一个元素靠近或者远离使用者的假象。
.popup{
transform:scale(1);
box-shadow:0px0px10px5pxrgba(0,0,0,0.3);
transition:box-shadow0.5s,transform0.5s;
}
.popup:hover{
transform:scale(1.3);
box-shadow:0px0px50px10pxrgba(0,0,0,0.3);
transition:box-shadow0.5s,transform0.5s;
}
浮动效果
我们能在:after这样的伪元素上增加box-shadow的效果。我们能使用这个来创建出元素底部的阴影,给予元素浮起或者掉落下来的假象。
.floating{
position:relative;
transform:translateY(0);
transition:transform1s;
}
.floating:after{
content:"";
display:block;
position:absolute;
bottom: -30px;
left:50%;
height:8px;
width:100%;
box-shadow:0px0px15px0pxrgba(0,0,0,0.4);
border-radius:50%;
background-color:rgba(0,0,0,0.2);
transform:translate(-50%,0);
transition:transform1s;
}
/* Hover States */
.floating:hover{
transform:translateY(-40px);
transition:transform1s;
}
.floating:hover:after{
transform:translate(-50%,40px)scale(0.75);
transition:transform1s;
}
我们能通过box-shadow属性达成许多其他的特效。举个例子,this popular pen 使用这个属性创造出8种类似纸张的效果。即使表面上看起来它是一个用于创建简单阴影的工具,实际上它可远比那个功能强大的多。
译者简介( )
年迈的程序猿
打赏支持作者写出更多好文章,谢谢!
关注「前端大全」
看更多精选前端技术文章
责任编辑:
html中如何出现三重阴影,探索 CSS3 中的 box-shadow 属性相关推荐
- rem单位中html默认字号,轻松掌握CSS3中的字体大小单位rem的使用方法
CSS3中新的字体单位rem前段时间无意中在wordpress主题中接触到一种字体单位rem,当时我就很好奇,毕竟以前没有见过,于是我马上查找资料,并测试了一回. 众所周知在web中有很多字体单位(f ...
- 机器学习中激活函数和模型_探索机器学习中的激活和丢失功能
机器学习中激活函数和模型 In this post, we're going to discuss the most widely-used activation and loss functions ...
- html中加好看的边框,html – CSS3中的嵌入边框很好
我真的很喜欢我最近在管子上看到的这种边界风格: 我对他们如何创造这种效果特别感兴趣,似乎底部边框突出显示而顶部变暗.我知道我在Photoshop中如何做到这一点,但他们如何在CSS中做到这一点? co ...
- html中投影效果图,利用CSS3(box shadow)制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
- Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
- 文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...
CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...
- html5 css3中的一些笔记
<!DOCTYPE html> <html> <head><meta charset="utf-8" ><title>c ...
- css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些 发布时间:2021-04-02 17:39:08 来源:亿速云 阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
- css3新增了哪三种边框效果,怎么在CSS3中实现一个边框效果
怎么在CSS3中实现一个边框效果 发布时间:2021-03-11 18:01:54 来源:亿速云 阅读:125 作者:Leah 怎么在CSS3中实现一个边框效果?相信很多没有经验的人对此束手无策,为此 ...
- 不是css3新增的技术,CSS3中的5个有趣的新技术
脚本之家将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角.个别圆角.不透明度.阴影和调整元素大小. CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时 ...
最新文章
- 学界 | 邢波团队提出 contrast-GAN:实现生成式语义处理
- ios第三方库和工具类
- PostgreSQL分区表的执行计划
- 用vue制作饿了么首页(1)
- c语言探测次数不超过4的哈希算法,HihoCoder1084: 扩展KMP(二分+hash,求T串中S串的数量,可以失配一定次数)...
- julia矩阵运算_Julia中的复数及其运算
- 三角形最佳路径问题(信息学奥赛一本通-T1288)
- textbox的textmode取为multiline多行时,其maxlength不起作用
- QT中QTableWidget清空或删除内容功能
- 转:超级好用的流程图js框架
- Object-C日志记录
- 阿里二面:我们为什么要做分库分表?
- 联通光猫型号: 吉比特GPON/4+1+WiFi2.5
- web网页调用本地cs客户端程序exe
- delphi android 蓝牙,Android实例-Delphi开发蓝牙官方实例解析(XE10+小米2+小米5)
- 怎样恢复电脑丢失的文件?
- java aspectj_Java逆向基础之AspectJ的ajc与aj5命令
- virtualenv: error: argument dest: the destination . is not write-able at /User/de/ .virtualenvs解决方法
- 三十四、Fluent液体喷雾蒸发模拟
- 李开复给中国大学生的第一封信——从诚信谈起