CSS3圓角邊框

2021-10-04 02:11:10 字數 601 閱讀 6307

使用 css3 border-radius 屬性,可以給任何元素製作 "圓角"。

使用 css3 border-radius 屬性,你可以給任何元素製作 "圓角"。

以下為三個例項:

1. 指定背景顏色的元素圓角:

2. 指定邊框的元素圓角:

3. 指定背景的元素圓角:

**如下:

#rcorners1 

#rcorners2 

#rcorners3 

如果你在 border-radius 屬性中只指定乙個值,那麼將生成 4 個 圓角。

以下為三個例項:

1. 四個值 - border-radius: 15px 50px 30px 5px:

2. 三個值 - border-radius: 15px 50px 30px:

3. 兩個值 - border-radius: 15px 50px:

#rcorners4 

以下為源**:

#rcorners5 

#rcorners6 

您還可以建立橢圓邊角:

#rcorners7 

#rcorners8 

#rcorners9 

CSS3圓角邊框

本文介紹border radius的使用 應用 特殊圓形的製作等!1.水平和垂直半徑一樣 border radius只設定乙個值 四個圓角相同 border radius設定兩個值 斜對角相同 border radius設定三個值 top right和bottom left相同 border rad...

CSS3圓角邊框

圓角 border radius border radius 左上 右上 右下 左下 即border radius 10px 20px 30px 40px 的結果為 左上 border top left radius 10px 等價於border radius 10px 0 0 0 右上 borde...

CSS3 圓角邊框

css3是css2的公升級版本,3只是版本號,它在css2.1的基礎上增加了很多強大的新功能。目前主流瀏覽器chrome safari firefox opera 甚至360都已經支援了css3大部分功能了,ie10以後也開始全面支援css3了。在編寫css3樣式時,不同的瀏覽器可能需要不同的字首。...