溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css如何控制圖片隨意圓角樣式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1、css圖片左邊變成圓角
代碼示例：
<!DOCTYPEHTML>
<htmllang="en">
<head>
<title>css圖片左邊變成圓角</title>
<metacharset="UTF-8">
<styletype="text/css">
.wrapperimg{
border-top-left-radius:2em;
border-bottom-left-radius:2em;
}
</style>
</head>
<body>
<divclass="wrapper">
<imgsrc="2.png"/>
</div>
</body>
</html>
效果如下圖：
7195b4eac7f080f194e1ca9ca70a84b.png
2、css圖片居中且css圖片圖片圓角邊框顯示
代碼示例：
<!DOCTYPEHTML>
<html>
<head>
<title>cssimg圓形角邊示例</title>
<metacharset="UTF-8">
<styletype="text/css">
.wrapper{
width:200px;
height:100px;
margin:0auto;
}
.wrapperimg{
border-radius:2em;
}
</style>
</head>
<body>
<div>
<imgsrc="2.png"/>
</div>
</body>
</html>
其中涉及到的重要的屬性就是border-radius；通過這個屬性就可以來實現圖片的圓角化。
border-radius的屬性的作用具體分別如下：
border-radius：2em，表示4個角都為圓角，且每個圓角的半徑都為2em。
可以設置兩個值，如border-radius:2em2em；第1個值表示左上圓角和右下圓角，第2個值表示右上圓角和左下圓角。
設置3個值，如border-radius：2em2em2em；第1個值表示左上圓角，第2個值表示右上和左下圓角，第3個值表示右下圓角。
設置4個值，如border-radius：2em2em2em2em；4個值分別表示左上、右上、右下、左下。
也可以將4個角拆分成4個單獨的屬性來設置，如左上圓角（border-top-left-radius）、右上（border-top-right-radius）、右下（border-bottom-right-radius）和左下圓角（border-bottom-left-radius）。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css如何控制圖片隨意圓角樣式”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
