1、css圖片左邊變成圓角
程式碼範例：
<!DOCTYPE HTML><html lang="en"><head> <title>css圖片左邊變成圓角</title> <meta charset="UTF-8"> <style type="text/css"> .wrapper img { border-top-left-radius:2em; border-bottom-left-radius:2em; } </style></head><body><div class="wrapper"> <img src="2.png" /></div></body></html>
效果如：
2、css圖片置中且css圖片圖片圓角邊框顯示
程式碼範例：
<!DOCTYPE HTML><html><head> <title>css img 圓形角邊樣本</title> <meta charset="UTF-8"> <style type="text/css"> .wrapper{ width: 200px; height: 100px; margin: 0 auto; } .wrapper img { border-radius:2em; } </style></head><body><div> <img src="2.png" /></div></body></html>
效果如：
其中涉及到的重要的屬性就是border-radius；通過這個屬性就可以來實現圖片的圓角化。
border-radius的屬性的作用具體分別如下：
border-radius：2em，表示4個角都為圓角，且每個圓角的半徑都為2em。
可以設定兩個值，如border-radius:2em2em；第1個值表示左上圓角和右下圓角，第2個值表示右上圓角和左下圓角。
設定3個值，如border-radius：2em 2em 2em；第1個值表示左上圓角，第2個值表示右上和左下圓角，第3個值表示右下圓角。
設定4個值，如border-radius：2em 2em 2em2em；4個值分別表示左上、右上、右下、左下。
也可以將4個角拆分成4個單獨的屬性來設定，如左上圓角（border-top-left-radius）、右上（border-top-right-radius）、右下（border-bottom-right-radius）和左下圓角（border-bottom-left-radius）。
以上就是關於使用css讓圖片變成圓角樣式的介紹，有一定的參考價值。希望對有需要的朋友有一定的協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
