小程序/CSS阴影属性box-shadow
2023-09-11 14:14:25 时间
box-shadow属性可以设置一个或多个下拉阴影的框。
box-shadow: 10px 10px 5px #888888;
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 说明 |
---|---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。阴影模糊半径。其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊 |
spread | 可选。阴影扩展半径。其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小 |
color | 可选。阴影的颜色。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色,建议不要省略此参数 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
为了兼容各主流浏览器并支持这些主流浏览器的较低版本,在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。
.box-shadow{
//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari、Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+、Google chrome10.0+、Oprea10.5+、IE9
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性 | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
box-shadow | 10.0 -webkit- | 9.0.0 | 4.0 (2.0)[3] 3.5(1.9.1) -moz | 5.1[1] 3.0 -webkit | 10.5[1] -o- |
相关文章
- 第七节:语法总结(1)(自动属性、out参数、对象初始化器、var和dynamic等) 图片放大镜 JavaScript-基础 用javascript写原生ajax(笔记) 初遇 Asp.net MVC 数据库依赖缓存那些事儿 前端JS 与 后台C# 之间JSON序列化与反序列化(笔记)
- ASP.NET MVC深入浅出(被替换) 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装(ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪
- H5新属性FileReader实现选择图片后立即显示在页面上
- 【小程序】input输入框属性及上下左右居中的示例(图文+代码)
- 微信小程序 - this.setData() 属性名使用变量(key 动态属性)
- 微信小程序 - 在视图组件上绑定函数并携带参数(事件对象自定义属性传参)
- 图解css3:核心技术与案例实战. 3.4 CSS3圆角边框属性
- 小程序开发 event对象中 target和currentTarget 属性的区别。
- javascript判断两个对象属性以及值是否相等
- openlayers6结合geoserver实现地图属性查询(附源码下载)
- 浅析uniapp开发微信小程序实际问题:预览及真机调试时包超过2M时、uniapp解决输入框被软键盘覆盖的问题、微信小程序flex:1属性不生效无法撑满元素问题、长按识别二维码、uni-app开发微信小程序唤起订阅消息
- 【数据结构/二叉树/二叉树属性】题解+详细备注(共10题)
- 微信小程序学习第7天——自定义组件(创建与引用、方法和属性、数据监听器、插槽)