box-shadow 制作单边阴影效果,不影响其它边的效果
来源:互联网 发布:电视盒直播软件下载 编辑:程序博客网 时间:2024/05/21 10:59
以前在使用box-shadow制作单边阴影效果的时候发现或多或少会影响其它边的展示效果.
今天在阅读文章的时候,终于发现了一个解决的方法.
就是利用box-shadow中的一个参数.spread来解决这个问题.
首先我们先要区分
box-shadow:0 10px 10px #ccc;
box-shadow:0 10px 10px -10px #ccc;
首先,我们应当认知到这两种书写方法都是正确的,其次,它们的展示效果肯定是不同的.
关于box-shadow的具体语法:
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
spread参数可以用于改变阴影的大小,其值可以试正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是缩小.
如图:
html:
<divclass="dv1">
</div>
<divclass="dv2">
</div>
style:
.dv1,.dv2{
width:100px;
height:100px;
border:1pxsolid#ccc;
}
.dv1{
box-shadow:-5px05px#ccc,/*左边阴影*/
0 -5px5px#ccc,/*顶部阴影*/
0 5px5px#ccc,/*底部阴影*/
5px0 5px#ccc;/*右边阴影*/
}
.dv2{
box-shadow:-5px05px-5px#ccc,/*左边阴影*/
0 -5px5px-5px#ccc,/*顶部阴影*/
0 5px5px-5px#ccc,/*底部阴影*/
5px0 5px1px#ccc;/*右边阴影*/
}
注意控制第四个spread值来达到显示单边阴影的效果.
参考:http://www.w3cplus.com/css3/css3-box-shadows-unnoticed-spread
0 0
- box-shadow 制作单边阴影效果,不影响其它边的效果
- box-shadow阴影效果
- box-shadow阴影效果的使用
- CSS3之------box-shadow属性使用方法(1),即单边阴影效果设置
- CSS实现跨浏览器的box-shadow盒阴影效果
- css3的box-shadow图层阴影效果
- box-shadow 添加阴影效果Css3
- CSS阴影效果(Box-shadow)各种用法
- CSS阴影效果(Box-shadow)用法趣味讲解
- 如何给边框添加阴影效果:box-shadow
- CSS阴影效果(Box-shadow)介绍与用法
- css:box-shadow的发光效果
- css:box-shadow的发光效果
- 利用box-shadow制作好看的阴影悬浮特效
- box-shadow的内外阴影
- UIview添加阴影效果Shadow
- css3 box-shadow发光效果
- css box-shadow效果演示
- linux usb ehci controller driver
- 自定义SDWebImage图片缓冲区自清理机制
- Gif录制工具--Mac篇
- shell 编程 错误 bash: [: missing `]'
- Servlet中解决中文乱码的方法
- box-shadow 制作单边阴影效果,不影响其它边的效果
- 【2016 泉市教科】保险箱
- studio 导入eclipse步骤及一些问题的解决
- 【Unity】Kinect入门——项目搭建
- 关于编程语言的思考——编译型和解释型
- 递归实现二叉树的三种遍历
- vsftpd的配置dns反向解析问题
- C#第四章
- 不同数据库下的Mybatis映射文件的写法