這篇文章主要介紹css3如何實現(xiàn)邊框的圓角和陰影，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比廈門網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式廈門網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋廈門地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

css3中，可利用border-radius屬性實現(xiàn)圓角，語法“border-radius:圓角半徑值;”；可利用box-shadow屬性實現(xiàn)陰影，語法“box-shadow:X軸偏移量 Y軸偏移量 模糊半徑 擴展半徑 顏色 投影方式;”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

邊框的圓角--border-radius

圓角的方塊：

border-radius:10px; /* 所有角都使用半徑為10px的圓角 */

效果：

實心上半圓：

方法：把高度(height)設(shè)為寬度（width）的一半，并且只設(shè)置左上角和右上角的半徑與元素的高度一致（也可以大于高度）。

#box{
    width:80px;
    height:40px;/*寬度的一半*/
    background:skyblue;
    border-radius:40px 40px 0 0;/*4個值分別代表上、右、下、左*/
}

效果：

實心圓：

方法：把寬度（width）與高度(height)值設(shè)置為一致（也就是正方形），并且四個圓角值都設(shè)置為它們值的一半。

#box{
    width:80px;
    height:80px;
    background:skyblue;
    border-radius:40px;
}

效果：

實心左半圓形：

方法：元素寬度為高度的一半，把左上角和左下角設(shè)為高度的一半。

#box{
    width:40px;
    height:80px;
    background:skyblue;
    border-radius:40px 0 0 40px;
}

效果：

邊框陰影---box-shadow

box-shadow可以為元素添加陰影，支持添加一個或者多個。

box-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色 投影方式;

參數(shù)：

注意：inset 可以寫在參數(shù)的第一個或最后一個，其它位置是無效的。

陰影模糊半徑：

此參數(shù)可選，值只能是為正值，如果值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊。

css代碼：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

陰影擴展半徑：

此參數(shù)可選，值可以是正負值，如果值為正數(shù)，整個陰影都延展擴大，反之值為負值時，則縮小。

css代碼：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

X軸偏移量和Y軸偏移量值可以設(shè)置為負數(shù)

X軸偏移量為負數(shù)：

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:-5px 5px 5px #666;
}

Y軸偏移量為負數(shù)：

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:5px -5px 5px #666;
}

外陰影：

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

內(nèi)陰影：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

添加多個陰影：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset,
                3px 3px 5px pink,
                6px 4px 2px green;
}

以上是“css3如何實現(xiàn)邊框的圓角和陰影”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！