CSS中可以通過幾種方式來設置圖片的形狀,包括圓形、橢圓形、正方形、矩形和自定義形狀等。
首先,可以使用border-radius屬性來設置圖片的圓角,從而實現圓形或橢圓形。該屬性值可以是一個數值(表示圓角的半徑),也可以是兩個數值(分別表示橫向和縱向的圓角半徑)。例如:
img { border-radius: 50%; }
上述代碼將圖片設置為圓形。
如果需要設置為橢圓形,則可以將border-radius的兩個值分別設置為橫向和縱向的半徑,例如:
img { border-radius: 50% 30%; }
上述代碼將圖片設置為橢圓形,橫向半徑為50%,縱向半徑為30%。
此外,也可以通過clip-path屬性來設置自定義形狀。clip-path的值可以是一個路徑(例如polygon()、circle()等),也可以是一個SVG圖形。例如:
img { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
上述代碼將圖片設置為不規則的菱形形狀。
最后,如果需要設置為矩形或正方形,則直接使用width和height屬性即可,例如:
img { width: 200px; height: 100px; }
上述代碼將圖片設置為長為200像素、寬為100像素的矩形。