css3怎麼實現邊框的圓角與陰影

青灯夜游

發布： 2021-12-15 12:02:39

原創

2873 人瀏覽過

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

css3怎麼實現邊框的圓角與陰影

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

邊框的圓角--border-radius

圓角的方塊：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */

登入後複製

效果：

##實心上半圓：

方法：將高度(height)設為寬度（width）的一半，並且只設定左上角和右上角的半徑與元素的高度一致（也可以大於高度）。

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

登入後複製

效果：

實心圓：

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

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

登入後複製

效果：

實心左半圓形：

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

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

登入後複製

效果：

邊框陰影---box-shadow

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

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

登入後複製

參數：

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

陰影模糊半徑：

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

css程式碼：

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

登入後複製

效果：

#陰影擴充半徑：

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

css程式碼：

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

登入後複製

效果：

#X軸偏移量和Y軸偏移量值可以設定為負數

X軸偏移量為負數：

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

登入後複製

效果：

#Y軸偏移為負數：

#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;
}

登入後複製

效果：

##內陰影：

#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;
}

登入後複製

效果：

##（學習影片分享：css影片教學

）

以上是css3怎麼實現邊框的圓角與陰影的詳細內容。更多資訊請關注PHP中文網其他相關文章！