溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css實現圖片圓角的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
css實現圖片圓角的方法：首先創建一個HTML示例文件；然后創建一個div元素；最后通過css3的“border-radius”屬性給元素添加圓角即可。
CSS圓角
css2.1給元素添加圓角是一件很麻煩的事，老辦法是用背景圖片實現，制作比較麻煩。css3，border-radius的屬性，使圓角屬性得到完美的解決。
語法
border-radius:長度值;
說明：
長度值可以是px、百分比、em等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓角實現</title>
<style type="text/css">
div{
width: 100px;
height: 50px;
border-radius: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>設置border-radius:10px;設置的四個圓角半徑都是10px
border-radius屬性值有四個寫法（同margin、padding相似）
（1）border-radius:一個值;
結果如上圖
（2）border-radius:兩個值;
例如:border-radius:10px 20px;表示左上角、右下角為10px，右上角、左下角為20px；
結果
（3）border-radius:設置三個值;
例如:border-radius:10px 20px 30px;表示左上角、右上角和左下角、左下角的圓角半徑依次是10px、20px、30px
結果
（4）border-radius:設置四個值
例如:border-radius:10px 20px 30px 40px;表示左上角、右上角、右下角和左下角的圓角半徑依次是10px 20px 30px 40px
結果
實現下圖效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓角實現</title>
<style type="text/css">
img{
width: 300px;
border-radius:80% 90% 100% 20%;
}
</style>
</head>
<body>
<img src="1.jpg" />
</body>
</html>感謝各位的閱讀！關于css實現圖片圓角的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
