CSS怎么畫圓角長(zhǎng)方形？

在CSS中，我們可以使用border-radius屬性來(lái)繪制圓角長(zhǎng)方形，這個(gè)屬性可以指定一個(gè)元素的四個(gè)角的半徑，從而實(shí)現(xiàn)圓角的效果。

我們需要?jiǎng)?chuàng)建一個(gè)HTML元素，比如一個(gè)div元素，我們可以使用CSS為該元素添加樣式，其中就包含border-radius屬性。

我們可以這樣寫：

div {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  border-radius: 10px;
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)寬度為200像素、高度為100像素的div元素，并給它添加了一個(gè)2像素寬的黑色邊框，我們使用border-radius屬性將四個(gè)角都設(shè)置為10像素的半徑，從而實(shí)現(xiàn)了圓角長(zhǎng)方形的效果。

我們也可以只設(shè)置某個(gè)角的半徑，比如只設(shè)置左上角和右下角的半徑：

div {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

在這個(gè)例子中，我們使用了兩個(gè)特定的屬性border-top-left-radius和border-bottom-right-radius來(lái)分別設(shè)置左上角和右下角的半徑，這樣，我們就可以得到只有左上角和右下角是圓角的特殊效果了。