CSS3属性text-shadow与box-shadow_谁是克里斯的博客-程序员信息网

技术标签: css3  CSS3  

序言

shadow字面含义——阴影;text-shadow和box-shadow就是文本阴影和盒子阴影了。text-shadow和box-shadow都是CSS3新增属性。

text-shadow(文本阴影)

目前市场上的所有主流浏览器都支持这个属性,IE的话得有10以上才支持。
主要是有四个属性值

  1. 阴影水平偏移值。可以为负值
  2. 阴影垂直偏移值。可以为负值
  3. 阴影模糊值。不允许负值
  4. 阴影的颜色。
    那么首先来个小案例看看效果
// html部分
<div class="text">
	text-shadow
</div>
// css部分
.text{
	font-size: 30px;
	text-shadow: 5px 5px 5px red;
}

效果图
在这里插入图片描述
可以看到在文本的右下角出现了像影子一样的阴影。此时的文本给人感觉就像是悬浮起来了一样。
有些时候会想要阴影在文本的四周均匀分布,那也很简单,只要不让文本阴影偏移就可以了,只需要设置text-shadow的前两个属性值都为0就可以了。
在这里插入图片描述
那又有些时候可能需要一些别(花)具(里)一(胡)格(哨)的感觉。比如想要文本四周都显示不同的阴影,怎么搞?
也很容易,设置阴影的时候不只是只能设置一个方向的阴影,意思就是可以在text-shadow后面写多个不同方向上的不同的阴影,怎么实现?看代码

.text{
	margin: 30px;
	font-size: 40px;
	text-shadow: 0px 10px 5px red,
				 10px 0px 5px blue,
				 0px -10px 5px yellow,
				 -10px 0px 5px green;
}

为了更好的展示效果,我调大了阴影的偏移量。
效果图
在这里插入图片描述
可以明显的看到文本四周出现了不一样颜色的阴影,是不是非常别(花)具(里)一(胡)格(哨)。这也说明了文本设置阴影不一定只能设置一个阴影。
阴影的出现可以是动画性的,阴影加在hover后,设置transition属性

.text{
	margin: 30px;
	font-size: 40px;
	transition: all 0.8s;
}
.text:hover{
	text-shadow: 0px 10px 5px red,
				 10px 0px 5px blue,
				 0px -10px 5px yellow,
				 -10px 0px 5px green;
}

看效果
在这里插入图片描述

box-shadow(盒子阴影)

盒子阴影的属性值比文本阴影的属性值多两个

  1. 阴影水平偏移值
  2. 阴影垂直偏移值
  3. 阴影模糊值半径
  4. 阴影外延值(可以不写)
  5. 阴影的颜色
  6. 属性值固定inset。定义元素的阴影类型为内阴影,默认不写就是外阴影

此属性在IE9以上支持,主流浏览器都支持

老规矩,先来打个样

// html部分
<div class="box"></div>
// css部分
.box{
	width: 100px;
	height: 100px;
	margin: 30px;
	background-color: blue;
	box-shadow: 5px 5px 5px red;
}

此时在横向上纵向上都设置了一定的偏移量,看效果
在这里插入图片描述
阴影处于盒子的左下方,此处第三个模糊值可以不用设置,不设置就是没有毛边,没有这种阴影的感觉,不设置这个没多大用处。
想要阴影在盒子四周展示和text-shadow一样,偏移量都设置为0就可以了,这里就不多写无用代码了。
再来看看他的另外两个值加上去之后的效果

.box{
	width: 100px;
	height: 100px;
	margin: 30px;
	background-color: blue;
	box-shadow: 5px 5px 5px 10px red inset;
}

在这里插入图片描述
可以看到原本没有毛边的蓝色盒子现在有了毛边,这就可以验证是向内的阴影,10px就是阴影的扩散值。直白点解释就是给阴影加宽,并且这个宽不算在阴影的过渡内。
那么既然text-shadow能设置四周不一样的阴影那么box-shadow肯定也是可以的,text-shadow能哟动画性,box-shadow也是可以的,代码都是一样,这里就不写上来了。

注意点

关于这两个属性要注意的地方其实没什么,主要一点就是不要搞混了,前两天写一个进度条上面小圆点的阴影,加上阴影后就是不显示,没有阴影效果,我在那找半天,最后发现设置成了text-shadow。通过这个案例,希望大家引以为戒,不要像我这个憨憨一样。这么低级的错误。但是也总结出来了 ,如果你的阴影没有效果,不妨先看看是不是设置错了属性。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45517927/article/details/105625530

智能推荐

30天自制操作系统-读取u盘数据_POFEI_IS_SHIT的博客-程序员信息网_可以往u盘写16进制数据嘛

0.准备再读取u盘这一节中,花费了一个月时间才成功,看到网站上有些博主说使用fat12文件格式的u盘,然后改下读取u盘的chs就能成功,有些博主说要用fat32文件格式的,再改chs也可以。我试了很久都不成功,实践证明还是要原理掌握了,才能实验成功。 先说下fat12文件格式的程序中的地址为什么是0xc200,0x4200+0x8000,0x8000是我们指定的内存读取地址,那么0x4200...

Android 基础知识点_那些回不去的年少无知的博客-程序员信息网_android基础

最近这一年都没有写过的Android也没有写过APP所以感觉自己都快忘光了最近一年都在写VUE又不想让自己把的Android扔下毕竟这个才是我的主要技能VUE只是辅助。这些技术点也是面试经常问到的,在整理这些之前参考了许多关于面试的帖子因为感觉自己把有些基础的东西和概念性的东西都忘记了本来想的直接去面试呢有感觉这是对自己和对面试公司的不负责所以把这些基础和概念性的东西都过一遍。好了废话不多...

小白如何进行生信分析平台搭建_科研小行星的博客-程序员信息网

很多读者想学习生物信息分析,而生物信息分析是一项实践性很强的工作,因此我们推出《生物信息分析平台搭建》系列,手把手教你搭建属于自己的生物信息分析系统,为了便于练习,我们将在虚拟机中进行练习,当熟练之后,在逐步上手实体机或云服务器。01. VirutalBox安装VirtualBox是目前免费虚拟机中最好用的软件,兼容性好、稳定、定期更新。是生信入门、无服务器还要数据分析的朋友居家必备软件。点击标题蓝字阅读原文,查立阅此软件下载、安装的详细图文教程。02. 安装Linux系统在Virt

Scikit-Learn学习笔记——SVM应用:人脸识别_盐味橙汁的博客-程序员信息网

SVM应用——人脸识别#下载数据from sklearn.datasets import fetch_lfw_peoplefaces = fetch_lfw_people(min_faces_per_person=60)print(faces.target_names)print(faces.images.shape)#输出结果['Ariel Sharon' 'Colin P...

JTree实现QQ好友列表_weixin_34014555的博客-程序员信息网

最近学习了一下JTree的使用方法:先来看一下树的实例:构建一个树,DefaultMutableTreeNode root = new DefaultMutableTreeNode("根节点");DefaultMutableTreeNode node = new DefaultMutableTreeNode("节点1"); root.add(node); root...

随便推点

二叉树的非递归遍历(前序、中序和后序)_realwongp的博客-程序员信息网

二叉树的循环遍历(前序、中序和后序)最近有小伙伴面试的时候被问到写循环遍历二叉树,虽然我面了几次还没被问到相关的,但是想着也是该会的东西,就花了点时间写了点代码,废话不多说,上菜。我的二叉树的声明如下:这个节点是在offer这个包里面的,所以下面的代码都会 import offer.TreeNodepackage offer;/** * @author WangPan * @d...

纯干货!AndroidHook机制连简单实战都不会凭什么拿高薪?跳槽薪资翻倍_普通网友的博客-程序员信息网

前言现实就是,99%的职业,年龄增大后都没前途。没前途是绝大多数普通人的宿命,有前途的人也用不着等到老。有没有前途已然不重要,无论做哪一行,健康的心态永远是首位。从我个人的角度写写30多岁码工的感受:的确是受年龄压力开始增大了。比如二十多岁的小年轻,可能什么都懂,对组里的东西很熟悉。有时候我也怀疑自己是不是智商不够,是不是自学能力太差,是不是基础不行,别人是不是都玩命加班,你知道30多岁的人那种危机感。Java基础知识点Jvm相关Java内存结构及分区Java对象的创建、存储及访问Java判

适用TP3.2.3分页样式_Las_wang的博客-程序员信息网

page.css/*thinkphp 分页样式*/div.page1 { margin-top: 20px; margin-right: 10px; float: right; color: #666;}div.page1 span.current , div.page1 a{ border: 1px solid #dcdcdc; display:

弘辽科技:成立仅5年的拼多多是如何一步步“紧逼”阿里的?_普通网友的博客-程序员信息网

原标题《弘辽科技:成立仅5年的拼多多是如何一步步“紧逼”阿里的?》成立仅仅5年的拼多多,不经意间已经成长为一家万亿公司。2020年11月12日,拼多多发布的第三季度财报显示,公司Q3净利润超4.6亿元,首次实现季度盈利,期间营收为142亿,同比增长89%。受此消息影响,拼多多股价随后快速上涨,达历史最高点156美元,公司市值约为1.2万亿人民币。上市仅两年,拼多多就成为了股价接近翻10倍的超级明星股,崛起速度令人咋舌。其创始人黄峥也成为了继马云、马化腾、农夫山泉创始人钟睒睒后,中国排名第四的富豪

__import__ 与动态加载 python module_JackLiu16的博客-程序员信息网

本文介绍 python module 的动态加载,我们有时希望从配置文件等地获取要被动态加载的 module,但是所读取的配置项通常为字符串类型,无法用 import 加载,例如: 1 2 3 4 5 6 &amp;gt;&amp;gt;&amp;gt; import 'os' File &quot;&amp;lt;stdin&amp;gt;&quot;, line 1 ...

ask信号调制matlab,基于Matlab的ASK数字调制系统仿真_薛志荣的博客-程序员信息网

基于Matlab的ASK数字调制系统仿真摘要:“幅移键控”又称为“振幅键控”,记为ASK。也有称为“开关键控”(通断键控)的,所以又记作OOK信号。ASK是一种相对简单的调制方式。幅移键控(ASK)相当于模拟信号中的调幅,只不过与载频信号相乘的是二进制数码而已。幅移就是把频率、相位作为常量,而把振幅作为变量,信息比特是通过载波的幅度来传递的。二进制振幅键控(2ASK),由于调制信号只有0或1两个电...