css3圓角屬性，css3圓角陰影的寫法

閱讀量： 7 發(fā)布日期： 2022-10-27 08:55:18

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，越來越多的網(wǎng)絡(luò)設(shè)計師開始使用css3來創(chuàng)建美麗而獨特的網(wǎng)站。Css3提供了許多新功能，包括圓角。

1、css3圓角屬性

目前，CSS3的新屬性border-radius可以輕松實現(xiàn)圓角效果。該屬性有兩個參數(shù)，第一個參數(shù)是水平方向的半徑，第二個參數(shù)是垂直方向的半徑。如果省略了第二個參數(shù)，則該參數(shù)將被設(shè)置為與第一個參數(shù)相等。

2、css3圓角邊框

這是一段關(guān)于css3圓角邊框的內(nèi)容。

3、css3圓角效果的寫法

CSS3 圓角可以使用下面的屬性來實現(xiàn)：

圓角的方塊：

border-radius:10px;

實心上半圓：

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

實心圓：

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

實心左半圓形：

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

4、css3 圓角陰影的寫法

CSS3 圓角陰影的寫法和 CSS3 圓角邊框的寫法類似，只是多了一個 box-shadow 屬性，支持添加一個或者多個。

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

陰影模糊半徑：

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

陰影擴展半徑：

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

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

圓角可以為任何網(wǎng)站添加一點優(yōu)雅，并且使用css3很容易創(chuàng)建。只需將適當?shù)拇a添加到樣式表中，您的圓角就會自動圓角。

作者: bosscms，轉(zhuǎn)載時必須經(jīng)得同意并以鏈接形式注明作者和原始出處及本聲明。

CSS樣式

上一篇：: CSS樣式高級技巧之滑動門技術(shù)

下一篇：: 什么是embed標簽,embed標簽用法

国产色欲AV一区二区三区,国精产品一品二品国精破解,亚洲国产福利成人一区,国语自产少妇精品视频

css3圓角屬性，css3圓角陰影的寫法

熱點推薦

相關(guān)模板推薦

無人機充電樁IT科技網(wǎng)站模板

HY011免費模板

HY010免費模板(帶商城功能)

HY009免費模板

HY008免費模板

HY007免費模板

聯(lián)系方式

国产色欲AV一区二区三区,国精产品一品二品国精破解,亚洲国产福利成人一区,国语自产少妇精品视频

css3圓角屬性，css3圓角陰影的寫法

熱點推薦

相關(guān)模板推薦

無人機充電樁IT科技網(wǎng)站模板

HY011免費模板

HY010免費模板(帶商城功能)

HY009免費模板

HY008免費模板

HY007免費模板

聯(lián)系方式

css3圓角屬性，css3圓角陰影的寫法