CSS3半邊圓角是CSS3中很常用的一個樣式,可以讓一個元素的其中一部分擁有圓角的樣式。使用CSS3半邊圓角樣式能夠讓我們更加方便地設計和美化我們的網頁。
/* 語法 */ border-radius: top-left top-right bottom-right bottom-left / x% y%; /* 示例代碼 */ border-radius: 0 20px 20px 0 / 50% 100%;
以上代碼中,border-radius
表示設置一個圓角的屬性。其中top-left
表示左上角,top-right
表示右上角,bottom-right
表示右下角,bottom-left
表示左下角。他們之間是用空格隔開的。
/
是一個分割符,用于將四個半徑的水平半徑和垂直半徑分開。例如,50%
表示水平方向的半徑是它父類寬度的50%,100%
則表示垂直方向的半徑是它父類高度的100%。
上述代碼代表的是,只有左邊是圓角,半徑為20px
,水平方向半徑為其父元素寬度的50%
,垂直方向半徑為其父元素高度的100%
。右上角、右下角和左下角則不是圓角,所以它們的半徑是0
。
CSS3半邊圓角是一種簡單常用的樣式,掌握對于設計師和前端開發者來說是必要的。希望本文能對大家有所幫助。
上一篇css rgb的參數
下一篇css3單擊動畫效果