首页 > 代码库 > CSS3之阴影
CSS3之阴影
CSS3中新增属性-阴影,可以做出很多漂亮的效果。
文字阴影text-shadow
text-shadow属性值的顺序:
text-shadow: h-shadow v-shadow blur color;
参数分别表示水平阴影位置,垂直阴影位置,模糊半径,阴影颜色。
一个栗子:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> p{ margin: 0; font-family: helvetica,arial,sans-serif; color: #999; text-align: center; font-size:80px; font-weight:bold; text-shadow:10px 10px #333; } </style></head><body> <p>Text Shadow</p></body></html>
图图:
通过控制水平位移和垂直位移可以控制阴影偏向,正值偏右偏下。负值偏左偏上。
栗子:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> p{ margin: 0; font-family: helvetica,arial,sans-serif; color: #999; text-align: center; font-size:80px; font-weight:bold; text-shadow:-10px -10px #333; } </style></head><body> <p>Text Shadow</p></body></html>
图图:
可以修改模糊半径来控制阴影的模糊程度:
栗子:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> p{ margin: 0; font-family: helvetica,arial,sans-serif; color: #999; text-align: center; font-size:80px; font-weight:bold; text-shadow:10px 10px 30px #333; } </style></head><body> <p>Text Shadow</p></body></html>
图图:
也可以定义多个阴影用逗号隔开:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> p{ margin: 0; font-family: helvetica,arial,sans-serif; color: #fff; text-align: center; font-size:80px; font-weight:bold; text-shadow:20px 50px 10px #600, 30px -10px 10px #060, -40px 20px 10px #006; } </style></head><body> <p>Text Shadow</p></body></html>
图图
还可以来点特效,比如燃烧:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> body { background:#000; } p{ margin: 0; padding:24px; font-family: helvetica,arial,sans-serif; color: #000; text-align: center; font-size:80px; font-weight:bold; text-shadow:0 0 4px #fff, 0px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; } </style></head><body> <p>Text Shadow</p></body></html>
图图:
浮雕效果:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> body { background:#ccc; } p{ margin: 0; padding:24px; font-family: helvetica,arial,sans-serif; color: #d1d1d1; background:#ccc; text-align: center; font-size:80px; font-weight:bold; text-shadow:-1px -1px #fff, 1px 1px #333; } </style></head><body> <p>Text Shadow</p></body></html>
图图:
盒子阴影box-shadow
box-shadow的属性值的顺序:
box-shadow: hoff voff bd sd color inset;
这里,hoff 指示水平偏移,voff 指示垂直偏移,bd 指示模糊距离,sd 指示扩散距离,color 指示阴影的颜色,inset 是一个关键字,在使用时指示阴影是内部阴影,而不是外部阴影。前两个值是属性工作所必需的值,所有值都必须按照列出的顺序指定。
上一些栗子:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> #sbox{ width: 200px; padding: 32px; background: #3385ff; text-align: center; -webkit-box-shadow:5px 5px 10px black; -moz-box-shadow: 5px 5px 10px black; } </style></head><body> <div id="sbox">Box Shadow</div></body></html>
图图:
CSS3之阴影
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。