溫馨提示×

css3的border-radius屬性怎么使用

小億
111
2023-07-06 15:11:28
欄目: 編程語言

CSS3的border-radius屬性用于設置元素的邊框圓角。

語法：

border-radius: value;

其中value可以是一個具體的長度值，也可以是一個百分比值。

示例：

  1. 設置所有四個角的圓角為10像素：

border-radius: 10px;

  1. 設置左上角和右下角的圓角為10像素，右上角和左下角的圓角為20像素：

border-radius: 10px 20px;

  1. 設置左上角的圓角為10像素，右上角和左下角的圓角為20像素，右下角的圓角為30像素：

border-radius: 10px 20px 30px;

  1. 設置左上角的圓角為10像素，右上角的圓角為20像素，右下角的圓角為30像素，左下角的圓角為40像素：

border-radius: 10px 20px 30px 40px;

注意：

  • 如果只設置一個值，則四個角的圓角都相等。

  • 如果設置兩個值，則第一個值為左上角和右下角的圓角，第二個值為右上角和左下角的圓角。

  • 如果設置三個值，則第一個值為左上角的圓角，第二個值為右上角和左下角的圓角，第三個值為右下角的圓角。

  • 如果設置四個值，則分別為左上角、右上角、右下角和左下角的圓角。

0 踩