1.outline的直角與圓角

來給個div：

<div class="use-outline"></div>

來再給個樣式：

 1 .use-outline{
 2            
 3             width: 200px;
 4             height: 200px;
 5             background: #009dda;
 6             margin: 100px 40px;
 7             border-radius: 10px;
 8             border: 10px solid #c24263;
 9 
10 
11             outline: 20px solid #26C2A7;
12             -moz-outline-radius: 30px;
13 
14         }                    

看一下效果圖：

-moz-outline-radius: 30px;屬性使得綠色的 outline  成圓角。但是這個屬性只能在FireFox瀏覽器中使用。切 ?。。?！這還怎么玩。。所以不用它了

接下來換一個，box-shadow(盒陰影)

1.outline的直角與圓角

給個樣式：

 1 .use-outline{
 2             width: 200px;
 3             height: 200px;
 4             background: #009dda;
 5             margin: 100px 40px;
 6             border: 10px solid #c24263;
 7             border-radius: 10px;
 8 
 9             box-shadow:0px 0px 0px 25px #c032cc;
10         }

看一下效果圖：

]

box-shadow: h-shadow   v-shadow   blur   spread   color   inset;

box-shadow中的6個參數(shù)分別為：
　　h-shadow:水平陰影的位置，可為負值；
　　v-shadow:垂直陰影的位置，可為負值；
　　blur:可選。模糊距;
　　spread:可選。陰影的尺寸;
　　color:可選。陰影的顏色;
　  inset:可選。將外部陰影 (outset) 改為內(nèi)部陰影;


兼容性處理：

filter: progid:DXImageTransform.Microsoft.Shadow(color=’顏色值’, Direction=陰影角度（數(shù)值）, Strength=陰影半徑（數(shù)值）)
這是理論，下面給你個例子：
#sean_msg{
filter: progid:DXImageTransform.Microsoft.Shado(Strength=3, Direction=135, Color='#999999');
上面是IE的樣式代碼
-webkit-box-shadow:2px 2px 3px #aaa; -------這是兼容谷歌瀏覽器
-moz-box-shadow:2px 2px 3px #aaa; --------這是兼容火狐瀏覽器
background:#fff; }

總結

以上是生活随笔為你收集整理的CSS3_实现圆角效果box-shadow的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。