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属性总结
- 下一篇： 【Navicat for MySQL】提