阴影：box-shodow 每个属性使用与分析

2024-05-10 10:04:51

目录

1、知识点概述

2、整体代码演示

3、各个属性演示

3.1、h-shadow

3.2、v-shadow

3.3、blur属性

3.4、spread属性

3.5、inset/outset属性

使用box-shadow可以轻松实现阴影的添加

1、知识点概述

综合写法： box-shadow:h-shadow v-shadow blur spread color outset;

h-shadow:表示水平阴影的位置，可以为负值，正值向右（必选属性）

v-shadow:表示垂直阴影的位置，可以为负值，正值向下（必选属性）

blur:阴影模糊半径，属性值为0，一点也不模糊（可选属性）

spread:阴影扩展半径，属性值越大，扩展的半径越大，不能为负值（可选属性）

color:阴影颜色（可选属性）

outset/inset:阴影在属性的内部还是外部，默认是在外部（可选属性）

2、整体代码演示

<style>.box {width: 200px;height: 50px;background-color: orange;margin: 100px auto;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .3);}</style>
</head><body><div class="box"></div>
</body>

3、各个属性演示

3.1、h-shadow

h-shadow的属性值为正值，且数值越来越大的情况下，阴影就水平向右不断扩大

h-shadow的属性值为负值，且绝对值越来越大的情况下，阴影就水平向左不断扩大

3.2、v-shadow

v-shadow的属性值为正值，且数值越来越大的情况下，阴影就水平向下不断扩大

v-shadow的属性值为负值，且绝对值越来越大的情况下，阴影就水平向上不断扩大

3.3、blur属性

如果blur改成0，那就没有模糊可言，如图所示

blur的属性值越大，越模糊：左边blur的属性值改成数值 8，盒子就变得模糊了很多。

3.4、spread属性

spread的属性值越大，模糊范围越大，不能为负值，看下图左边第四个属性值

3.5、inset/outset属性

默认是outset，但你不能在后面再写一遍，写一遍之后就不能正常显示阴影效果

下图左边中的box-shadow属性直接不能正常执行

如果改为inset就往元素里面凹阴影

阴影：box-shodow 每个属性使用与分析相关推荐

属性级情感分析（于restaurant14和laptop14数据集上使用LSTM和GRU、 MemNet和IAN以及CNN等）的对比分析
随着人们的社交活动.消费习惯.工作内容也逐渐由线下转移到线上,从互联网上海量文本中自动挖掘出人们对各类事务的需求.喜好.观点.态度等,具有广阔的应用场景和很高的商业价值. 在自然语言处理领域,情感分析 ...
讨教大学|六西格玛之属性值数据一致性分析
相信大家在日常的工作中肯定会遇到这样一种情况:产品的质量特性属于外观特性,即需要靠人工判断产品是不是符合标准.当遇到客户投诉,或者内部报废率比较高的时候,经常会遇到客户和领导的挑战: 如何保证员工 ...
html字体投影效果,IE10中的CSS3文字阴影（text-shadow）属性
IE10浏览器在Windows开发者预览版中引入了支持硬件加速的CSS3文字阴影(text - shadow)属性.文字阴影是Web开发中最重要的需求功能之一.它使得以前在标准中难以实现的文字效果以更 ...
面向社交媒体的多模态属性级情感分析研究
每天给你送来NLP技术干货! 分享嘉宾:虞剑飞南京理工大学副教授编辑整理:路人复旦大学出品平台:DataFunTalk 导读:随着社交网络的飞速发展,人们在以微博.Twitter为代表的社交 ...
微信推文属性的关联分析 by Apriori算法
本文通过Apriori算法来对某公司的微信推文属性的关联分析. 本文的目的找出可让 ['阅读量超过1K'] 的因素,以便达到这些因素使微信推文阅读量提升. 本文的结论若想让微信推文阅读量超过1K, ...
html div box,CSS box-sizing属性的正确用法
CSS box-sizing属性的正确用法 CSS自定义属性(变量) CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框. 没有CSS box-sizing属性默认情况下, ...
Java编程题：定义一个Box类，属性有：长，宽，高，并初始化数据
Java编程题:定义一个Box类,属性有:长,宽,高,并初始化数据 Box类: /*** Java编程题:定义一个Box类,属性有:长,宽,高,并初始化数据*/package Box;public c ...
网页中的盒模型css属性,详解CSS中的Box Model盒属性的使用
页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看 Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分别是: ...
AbstractBeanDefinition：lenientConstructorResolution属性源码分析
版本:spring-framework-4.1 一概述在看AbstractBeanDefinition源码时,注意到lenientConstructorResolution属性有诸多不疑,现在通过示 ...

最新文章

热门文章