CSS3------box-shadow，即单边阴影效果设置
box-shadow修改元素的阴影效果要方便得多，因为box-shadow可以修改六个参数，得到不同的效果。下面结合一些简单的案例来对box-shadow属性进行演示说明。
1．单边阴影效果
定义元素的单边阴影效果和调协border的单边边框颜色是相似的，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box-shadow {
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
}
.top {
box-shadow: 0 -2px 0 red;
}
.right {
box-shadow: 2px 0 0 green;
}
.bottom {
box-shadow: 0 2px 0 blue;
}
.left {
box-shadow: -2px 0 0 orange;
} </style> </head>
<body>
<div class="box-shadow top"></div>
<div class="box-shadow right"></div>
<div class="box-shadow bottom"></div>
<div class="box-shadow left"></div>
</body>
</html>
效果如图3-38所示。
这个案例中，使用box-shadow给元素设置了顶边、右边、底边和左边的单边阴影效果。主要通过box-shadow的水平和垂直阴影的偏移量 来实现，其中x-offset为正值时，生成右边阴影，反之为负值时，生成左边阴影；y-offset为正值时，生成底部阴影，反之为负值时生成顶部阴 影。此例中是一个单边实影投影效果（阴影模糊半径为0），但是如果阴影的模糊半径不是0，上面的方法还能不能实现单边阴影效果呢？不急着来回答，在上面的 实例中添加一个模糊半径，例如：
.top {
box-shadow: 0 -2px 5px red;
}
.right {
box-shadow: 2px 0 5px green;
}
.bottom {
box-shadow: 0 2px 5px blue;
}
.left {
box-shadow: -2px 0 5px orange;
}
图3-39说明，这个效果并不是理想的单边阴影效果，当box-shadow添加了5px阴影模糊半径后，阴影不再是实影投影，阴影清晰度向外扩散，更具阴影的效果。但造成了另一个问题，给元素其他三个边加上淡淡的阴影效果，可这并不是设计需要的效果。
那究竟要怎么做呢？此时，box-shadow属性中的阴影扩展半径（spread-radius）会是一个很关键的属性，要实现单边阴影效果，必须配上这个属性（除单边实影之外）。
.top {
box-shadow: 0 -4px 5px -3px red;
}
.right {
box-shadow: 4px 0 5px -3px green;
}
.bottom {
box-shadow: 0 4px 5px -3px blue;
}
.left {
box-shadow: -4px 0 5px -3px orange;
}
上面的代码调整了阴影的位移量，新增了box-shadow的扩展半径，最终效果如图3-40所示。
注意 各浏览器下显示效果略有细节差别。
图3-40
CSS3------box-shadow，即单边阴影效果设置的更多相关文章
- css3 box
一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...
- box-shadow 制作单边阴影效果,不影响其它边的效果
box-shadow 制作单边阴影效果,不影响其它边的效果: https://blog.csdn.net/u010289111/article/details/53171128 CSS 样式实现单边 ...
- Virtual Box中 CentOS双网卡设置
Virtual Box中 CentOS双网卡设置: 在Virtual Box中安装CentOS x86-64 6.4(final),配置了双网卡,eth0 为桥接模式 , eth1为内网模式 ...
- 如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
- 浅谈 css3 box盒子模型以及box-flex的使用
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 一.使 ...
- CSS3教程:Transform的perspective属性设置
1 2 <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(4 ...
- css3 Box model 与 Box-sizing
1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...
- Virtual Box 下Ubuntu桥接网络设置
转自:http://os.51cto.com/art/200908/144564.htm 一般而言,安装完VirtualBox设定网路时选择默认的NAT模式,Guest就可顺利联网了,但是这种方式比较 ...
- android文字阴影效果设置
<TextView android:id="@+id/tvText1" android:layout_width="wrap_content" andro ...
随机推荐
- htpwdScan — 一个简单的HTTP暴力破解、撞库攻击脚本
李姐姐之前跟我们分享了子域名枚举工具subDomainBrute<subDomainsBrute — 改进渗透测试时暴力枚举子域名的python脚本>,这回带给我们htpwdScan ht ...
- postman中x-www-form-urlencoded与form-data的区别
这是W3C定义的两种不同的表格类型,如果你想发送简单的text/ASCII数据,使用x-www-form-urlencoded , 这是默认的形式. 如果你想发送非ASCII文本或者大的二进制数据,使 ...
- 无锁版以时间为GUID的方法
之前的博客 将时间作为GUID的方法 中,我使用了锁.我在实际的使用中,错将锁的释放放在了if语句中,这纯粹是我的失误,导致了很严重的错误.因此我在想是否有无锁的将时间作为GUID的方式,答案是使用I ...
- Listview四种视图VIEW
http://wenku.baidu.com/link?url=65Ac8WL6j8KZwDlN8LyoxqFF5Jynvg80LnKc4jqTPQTY-59wwRDKhqGySYwxf6gZ9_6T ...
- php内核之数组
1.zend_hash_num_elements 获取数组元素个数.宏定义如下: #define zend_hash_num_elements(ht) \ (ht)->nNumOfElement ...
- vertica merge 优化
-- 查看RDS的订单数(MySQL) select count(*) from ( SELECT tid, IF(LOCATE('pay_time', jdp_response)=0 ...
- double处理
String s = "1,3;2,3,4;5"; String[] split = s.split(";");double[][] d;d = new dou ...
- [洛谷P4107] HEOI2015 兔子与樱花
问题描述 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个树枝连接,我们可以把它 ...
- Java调用Fortran生成so库报“libifport.so.5: 无法打开共享对象文件”错误解决方法
source /opt/intel/bin/compilervars.sh intel64
- vs code添加到鼠标右键
首先在页面上新建个文本文件,然后改名和后缀为 add.reg 然后把下面的代码放到里面去,修改路径,然后直接运行就可以了 (路径就是vscode安装的目录) Windows Registry Edit ...