border radius屬性值引數詳解

2021-07-27 03:50:09 字數 1871 閱讀 3874

border-radius是css3設定圓角的乙個屬性,其屬性值得單位可以使用:em、px、百分比等等。但是,border-radius屬性值得引數形式有好多種,那麼具體都代表什麼意思呢?下面以實際例子分析一下:

首先是最常見的一種形式,乙個值:border-radius: 值;

這段**代表同時將元素的每個圓角的"水平半徑"和"垂直半徑"都設定為10px。

border-radius可以同時設定1到4個值,(類似於margin與padding的值得設定)。如果設定四個值,則依次對應左上角、右上角、右下角、左下角(順時針順序)。

如果設定兩個值,表示左上角和右下角使用第乙個值,右上角和左下角使用第二個值。

如果設定三個值,表示左上角使用第乙個值,右上角和左下角使用第二個值,右下角使用第三個值。

border-radius還可以用斜槓二組值。這時,第一組值表示水平半徑,第二組值表示垂直半徑。每組值也可以同時設定1到4個值,應用規則是依次對應左上角、右上角、右下角、左下角(順時針順序)。

除了可以同時設定四個圓角以外,還可以單獨對每個角進行設定。對應四個角,css3提供四個單獨的屬性:

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

這四個屬性都可以同時設定1到2個值。如果設定1個值,表示水平半徑與垂直半徑相等。如果設定2個值,第乙個值表示水平半徑,第二個值表示垂直半徑。

border radius屬性詳解

border radius屬性的應用,大家最熟悉的應該就是頭像了,但其實,border radius屬性還是很強大的,你能相信,下面兩個圖形都是用border radius畫出來的麼?下面是我結合網上大佬們的部落格資料以及自己的實踐結果得出來的一些結論,有什麼不對的望各位大神們批評指出,謝謝 我們經...

border radius屬性詳解

在平時工作中border radius這個屬性,一直拷貝的ui的設計值,用的最多的也是border radius 50 這個屬性。竟然一直沒去深入了解過其特性。border radius 300px 300px 300px 300px 300px 300px 300px 300px 其中分別對應 左...

border radius值的解析

border radius none length length 其中每乙個值可以為 數值或百分比的形式。length length 第乙個lenght表示水平方向的半徑,而第二個表示豎直方向的半徑。如果是乙個值,那麼 top left top right bottom right bottom l...