CSS阴影box-shodow总结
生活随笔
收集整理的这篇文章主要介绍了
CSS阴影box-shodow总结
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果
基本语法是 {box-shadow:[inset] x-offset y-offset blur-radius spread-radius color}
[inset/outset] 阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
blur-radius 阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
spread-radius 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
color阴影颜色：此参数可选。
为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。
<style type="text/css">.box-shadow{ -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; //Safariand Google chrome10.0- -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; //Firefox4.0- box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;//Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 }
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题 1</title><style type="text/css">.d1{width: 300px;height: 100px;border: 1px solid #2cb7fe;text-align: center;-webkit-box-shadow: 3px 3px 10px #9edeff;box-shadow: 3px 3px 10px #9edeff;}.d2{width: 300px;height: 100px;border: 1px solid #2cb7fe;text-align: center;-webkit-box-shadow: 3px 3px 10px #9edeff inset;box-shadow: 3px 3px 10px #9edeff inset; }.d3{ width: 300px;height: 100px;border: 1px solid #2cb7fe;-webkit-box-shadow: 0 0 5px 3px #f00, 0 0 5px 6px #00f, 0 0 5px 10px #00FF00;box-shadow:0 0 5px 3px #f00, 0 0 5px 6px #00f, 0 0 5px 10px #00FF00; }</style> </head><body><div class="d1">box-shadow:3px 3px 10px #9edeff;</div><br><div class="d2">box-shadow:3px 3px 10px #9edeff inset;</div><br><div class="d3">box-shadow:多组属性用“,”隔开</div></body></html>
总结
以上是生活随笔为你收集整理的CSS阴影box-shodow总结的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 边框border属性总结
- 下一篇： CSS边框素材