您好,登錄后才能下訂單哦!
本篇內容介紹了“CSS3圓角屬性的詳細介紹”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
border-radius圓角
圓形,border-radius制作圓角有兩點技巧。 -元素的寬度和高度相同。 -圓角的半徑值為元素寬度或寬度的一半或者直接設置圓角半徑值為50%。
2.半圓,border-radius制作半圓與制作圓形的方法是一樣的,只是元素的寬度與圓角方位要配合一致,不同的寬度和高度比例,以及圓角方位,可以制作上半圓、下半圓、 左半圓 和 右半圓效果。
扇形,border-radius制作扇形, 其實就是使用border- radius屬性制作四分之一圓形。 遵循“ 三 同,一 不同”原則, 其中“ 三 同” 是指元素的寬度、高度 和圓角半徑值相同, 而“ 一 不同” 指的是圓角位置不同。 根據圓角取值位置不一樣, 可以分左上、右上、右下和左下四種扇形效果。
http:/ /www.iis7.com/b/wzjk/
橢圓,橢圓其實就是一個圓形受到擠壓而成的一種形狀,border-radius制作橢圓也非常方便,只受限于元素的寬度或高度, 然后就是圓角半徑, 制作橢圓的 圓角半徑和其他圖形有所不一樣, 需要設置圓角的水平和垂直方向的半徑值。 橢圓有兩種, 一種是水平的, 另外一種是垂直的。 它們之間的差別只是方向性的 區別, 其制作方法是一樣的。 制作水平橢圓, 元素寬度是高度的2倍, 而且border-radius的水平半徑等于元素寬度, 垂直半徑等于元素高度;而垂直橢圓剛好 與水平橢圓的參數相反。
“CSS3圓角屬性的詳細介紹”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。