CSS3圓角邊框

2021-07-13 09:29:24 字數 1809 閱讀 5573

本文介紹border-radius的使用、應用、特殊圓形的製作等！

1.水平和垂直半徑一樣：

border-radius只設定乙個值：四個圓角相同

border-radius設定兩個值：斜對角相同

border-radius設定三個值：top-right和bottom-left相同

border-radius設定四個值：各自取值

2.單獨設定水平和垂直半徑：用」/」來區別：水平半徑/垂直半徑

.border-radius
效果圖：

注意：分開設定元素各個頂角的圓角的水平和垂直半徑圓角效果時，是不需要』/』的，不需要』/』的，不需要』/』的，加上反而是錯誤的！！！

3.製作單個圓角邊框

border-radius


:30px 0


00;
4.特殊應用：border-radius：內半徑=外半徑-邊框寬度！內半徑為兩者的差值，差值越大，圓角幅度也越大，反之圓角幅度越小。當border邊寬越大時候，內圓角接近於直角，不具有圓角效果。

不同寬度的相鄰邊，內角會從寬的邊平滑過渡到窄的一邊，其中一條邊可以為0，相鄰轉角由大向小轉。

//內半徑=外半徑-邊寬，邊寬過大則內圓角為直角


.border-radius2


//不同寬邊的平滑過渡效果


.border-radius3
效果圖：

1.圓形：

製作技巧：元素的寬度和高度相同，圓角半徑為寬或高的一半或直接設定50%！

.round
2.半圓：製作技巧：元素的寬度和高度相配合（多為2倍關係），圓角半徑為短邊的值，圓角半徑設定位置不同。分上、右、下、左半圓

//上半圓


.halfcircle


//右半圓


.halfcircle2


//...
3.扇形：製作技巧：其實就是製作四分之一圓，遵循」三同，一不同「原則，寬度，高度，圓角半徑相同，圓角位置不同。分為左上、右上、右下、左下。

.quartercircle
4.橢圓：製作技巧：設定水平和垂直半徑，例如水平方向的橢圓：寬度=高度x2，水平半徑=寬度，垂直半徑=高度！垂直方向的橢圓則相反。

.hor
可以配合元素的其他屬性實現不同的圖形效果，適應專案需求。border-radius瀏覽器相容性較好，ie8以下不支援，but,who care about it？…

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樣式時，不同的瀏覽器可能需要不同的字首。...

CSS3圓角邊框

使用 css3 border radius 屬性，可以給任何元素製作 圓角 使用 css3 border radius 屬性，你可以給任何元素製作 圓角 以下為三個例項 1.指定背景顏色的元素圓角 2.指定邊框的元素圓角 3.指定背景的元素圓角 如下 rcorners1 rcorners2 rcor...