html盒子阴影的语法,css3 盒阴影box-shadow
1.描述:
box-shadow可以设置一个或多个下拉阴影的框,此属性使用于盒模型不是用来设置文字阴影,设置文字阴影可以使用text-shadow
2.语法:
box-shadow:h-shadow v-shadow blur spread color inset
◆h-shadow:(必)定义阴影的水平位移,可负(正数:阴影出现在边框的右边,负数:阴影出现在边框的左边 0:不显示)
◆v-shadow:(必)定义阴影的垂直位移,可负(正数:阴影出现在边框的下边,负数:阴影出现在边框的上边 0:不显示)
◆blur:(可选)模糊距离(0:不显示阴影,负数:不显示阴影 正数:数值越大阴影越模糊)
◆spread:(可选)阴影的大小
◆color:(可选)阴影的颜色
◆inset:(可选)从外层的阴影(开始时)改变阴影内侧阴影(设置该值:阴影出现在边框的里边,取消该值:阴影出现在边框的外边)
总结:h-shadow v-shadow 属性决定的是阴影的偏移量,blur spread属性决定阴影的模糊程度与大小
color属性决定的是阴影的颜色
3.例子
1】设置h-shadow v-shadow color
.box-shadow{
width:200px;
height:100px;
background:#FF8C69;
margin-left:100px;
box-shadow:10px 10px #888;//设置h-shadow v-shadow color
}
2】在上面例子基础上添加blur属性
box-shadow:10px 10px 5px #888;//添加blur属性为5px
由此图可见,阴影部分变模糊了
改变blur的值为30px
box-shadow:10px 10px 30px #888;//改变blur为30px
结论:blur的值越大,阴影越模糊
3】添加spread属性
box-shadow:10px 10px 5px 20px #888;//设置spread值为20px
4】h-shadow v-shadow 设置为0
box-shadow:0px 0px 10px #888;
h-shadow与v-shadow设置为0,阴影在元素的正下方,正好被块元素遮挡, 设置blur,spread属性就会让阴影从块元素向四方扩散
框和阴影的关系:只要存在框,它就存在阴影,默认情况下,阴影与框宽高一致,阴影重叠在框的下面不可见
5】在"4】"的基础上设置spread为20px
box-shadow:0px 0px 10px 20px #888;
6】设置四个边框不同颜色的阴影
.box-shadow{
margin-top:50px;
width:200px;
height:100px;
background:#FF8C69;
margin-left:100px;
box-shadow:-10px 0px 10px #DDA0DD,//左边阴影
0px -10px 10px #E6E6FA,//上边阴影
10px 0px 10px #CDCDB4,//右边阴影
0px 10px 10px #CAFF70;//下边阴影
}
7】设置半透明阴影
透明之前阴影
.box-shadow{
margin-top:50px;
width:200px;
height:100px;
background:#FF8C69;
margin-left:100px;
box-shadow:50px 50px rgba(221, 160, 221,.4);
}
8】设置一个方向山多个阴影
box-shadow:50px 50px rgba(221, 160, 221,.4),120px 120px rgba(192, 255, 62,.4);
html盒子阴影的语法,css3 盒阴影box-shadow相关推荐
- CSS3 盒阴影 box-shadow属性
默认情况下,一个盒子是没有阴影的,可以使用 box-shadow属性为盒子添加一个或多个阴影.语法格式为: box-shadow: [inset] x-offset y-offset blur- ...
- css阴影设置透明度,css3圆角 阴影 透明度
css3圆角 阴影 透明度 .box{ width: 200px; height: 200px; border: 2px solid #000; background-color: gold; mar ...
- CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
- CSS3开发总结(圆角、盒阴影、边界图片)
CSS3开发总结(圆角) 12/100 发布文章 qq_41913971 CSS3 1)圆角 border-radius 2)盒阴影 box-shadow 3)边界图片 border-image-so ...
- html盒子产生阴影,css给一个盒子加盒阴影的方法
css给一个盒子加盒阴影的方法 发布时间:2020-11-16 10:57:56 来源:亿速云 阅读:171 作者:小新 这篇文章主要介绍了css给一个盒子加盒阴影的方法,具有一定借鉴价值,需要的朋友 ...
- 微信小程序界面设计小程序中CSS3样式精通课程-边框-box-shadow 盒阴影
边框-box-shadow 盒阴影 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法 浏览 ...
- CSS3新增属性之圆角、盒阴影、字阴影
CSS3新增属性之圆角.盒阴影.字阴影 人生没有白走的路,每一步都算数. 一.圆角 border-radius:; 取值px % border-radius: 50%; 画一个圆 二.盒阴影 box- ...
- css如何给盒子底部加阴影,CSS3 --添加阴影(盒子阴影、文本阴影的使用)
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- css3-pie,PIE使IE支持CSS3圆角盒阴影与渐变渲染
一.PIE之简述 在国外,CSS3的盛行与普及,探讨与研究要比国内领先不知多少个身位.相比之下,国内似乎如一潭死水,为何?我觉得国内领先的前端团队应该通过自身的影响力,带动国内整个前端领域与时俱进.然 ...
最新文章
- python格式化html库_用Python格式化HTML代码
- 前端html继承的方式,好程序员web前端教程之JS继承实现方式解析
- 机器学习笔记(十二)计算学习理论
- 机房管理系列之工作站
- 【小夕精选】YJango 7分钟带你领略你未曾想过的线性代数+微积分
- 根据netmask快速判断是否在一个网域
- Python+pandas填充缺失值的几种方法
- STM32开发笔记之——CMSIS DAP
- 实验4-1-6 求分数序列前N项和 (15 分)
- 把kafka数据从hbase迁移到hdfs,并按天加载到hive表(hbase与hadoop为不同集群)
- python爬虫爬取一次数据多长时间_「Python爬虫系列讲解」1. 网络数据爬取概述
- 客户端js 读取 json 数据
- LeetCode详解C++版
- 【企业架构】什么是 Zachman 框架? 用于管理企业架构的矩阵
- 8本新书,为你的2020年管理之路指点迷津
- QTTabBar 「资源管理器」让你的文件夹拥有浏览器标签页般的体验
- MEMS惯性导航单元的标定与测试
- Typora的使用方法
- 论文清单:一文梳理因果推理在自然语言处理中的应用(附链接)
- JavaScript数组反转教程