border radius屬性詳解

2022-10-10 06:42:08 字數 577 閱讀 8987

在平時工作中border-radius這個屬性,一直拷貝的ui的設計值,用的最多的也是border-radius:50%這個屬性。竟然一直沒去深入了解過其特性。

border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

其中分別對應:左上角水平圓角半徑大小 、右上角水平圓角半徑大小 、右下角水平圓角半徑大小 、左下角水平圓角半徑大小/左上角垂直圓角半徑大小、 右上角垂直圓角半徑大小 、右下角垂直圓角半徑大小 、左下角垂直圓角半徑大小;

其表現為:

在設定的畫素值很大的時候,會使用能渲染最大弧度的值。例如:乙個100px*100px的正方形,最大的弧度是水平半徑和垂直半徑為50的弧度,所以設定border-radius:50px 和border-radius: 100px是乙個效果,只會取50px。

最終渲染的弧度的水平半徑和垂直半徑的比例和最初的比例是一致的。例如:乙個100px*200px的正方形,設定border-radius: 100px/100px。由於水平半徑最大值是50px,所以水平半徑最終會渲染成50px,100px/100px是1:1的比例,所以垂直半徑也會是50px。

CSS3的border radius屬性詳解

除了上述的簡寫外,還可以和border一樣,分別寫四個角,如下 border top left radius 左上角 border top right radius 右上角 border bottom right radius 右下角 border bottom left radius 左下角 分別...

border radius屬性詳解

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

border radius屬性值引數詳解

border radius是css3設定圓角的乙個屬性,其屬性值得單位可以使用 em px 百分比等等。但是,border radius屬性值得引數形式有好多種,那麼具體都代表什麼意思呢?下面以實際例子分析一下 首先是最常見的一種形式,乙個值 border radius 值 這段 代表同時將元素的每...