css3如何實(shí)現(xiàn)邊框的圓角和陰影

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

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

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

邊框的圓角--border-radius

圓角的方塊：

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

效果：

實(shí)心上半圓：

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

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

效果：

實(shí)心圓：

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

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

效果：

實(shí)心左半圓形：

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

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

效果：

邊框陰影---box-shadow

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

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

參數(shù)：

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

陰影模糊半徑：

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

css代碼：

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

陰影擴(kuò)展半徑：

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

css代碼：

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

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

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

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

Y軸偏移量為負(fù)數(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;
}

添加多個(gè)陰影：

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

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