邊框 border-radius

CSS的border屬性是一個用于設置各種單獨的邊界屬性的簡寫屬性。border可以用于設置一個或多個以下屬性的值:
border-width, border-style, border-color

border-radius: 15px;
border-radius: 15px;

這條語句同時將每個圓角的"水平半徑"(horizontal radius)和"垂直半徑"(vertical radius)都設置為15px。

horizontal radius - vertical radius

border-radius可以同時設置1到4個值。如果設置1個值,表示4個圓角都使用這個值。如果設置兩個值,表示左上角和右下角使用第一個值,右上角和左下角使用第二個值。如果設置三個值,表示左上角使用第一個值,右上角和左下角使用第二個值,右下角使用第三個值。如果設置四個值,則依次對應左上角、右上角、右下角、左下角(順時針順序)。

分別設置兩個值和三個值

border-radius還可以用斜杠設置第二組值。這時,第一組值表示水平半徑,第二組值表示垂直半徑。第二組值也可以同時設置1到4個值,應用規則與第一組值相同。

設置兩組值
仔細觀察體會值的應用

參考鏈接:CSS3圓角詳解

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • CSS邊框屬性 元素的邊框就是圍繞元素內容和內邊距的一條或多條線。 元素的邊框屬性: border 簡寫屬性,用...
    Zd_silent閱讀 1,008評論 0 1
  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,657評論 0 7
  • 感情是種很微妙的東西,近了怕膩,遠了怕淡,試問有幾個人能把“火候”掌握的那么好,起碼我現在的年紀閱歷讓我做...
    張小姐愛江湖閱讀 195評論 0 0
  • 「怎么做出一個形式新穎的PPT?從哪些方面入手?」 小晶你好,PPT模版市場不缺乏新穎的PPT,各路大神傾盡自己的...
    湯帥同學閱讀 1,858評論 0 5
  • 月色在寂寥中沉默, 沉默是盛秋時那金黃的顏色, 在那金色的夕陽中, 勞動者辛苦致力于他的收獲。 月色在沉默中頹喪,...
    化羽千靈閱讀 203評論 0 0