css怎麼控制圖片隨意圓角樣式？ （例）
本篇文章主要介紹如何用css讓圖片產生圓角邊框。
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="/static/imghw/default1.png" data-src="2.png" class="lazy" / alt="css怎麼控制圖片隨意圓角樣式？ （例）" >
</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="/static/imghw/default1.png" data-src="2.png" class="lazy" / alt="css怎麼控制圖片隨意圓角樣式？ （例）" >
</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讓圖片變成圓角樣式的介紹，有一定的參考價值。希望對有需要的朋友有一定的幫助。
【相關文章推薦】
使用HTML5 Canvas繪製圓角矩形及相關的一些應用範例_html5教程技巧
以上是css怎麼控制圖片隨意圓角樣式？ （例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
