首頁  >  文章  >  web前端  >  css怎麼控制圖片隨意圓角樣式? (例)

css怎麼控制圖片隨意圓角樣式? (例)

藏色散人
藏色散人原創
2018-08-14 10:59:202650瀏覽

本篇文章主要介紹如何用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="2.png" / alt="css怎麼控制圖片隨意圓角樣式? (例)" >
</div>
</body>
</html>

效果如下圖:

css怎麼控制圖片隨意圓角樣式? (例)

#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" / alt="css怎麼控制圖片隨意圓角樣式? (例)" >
</div>
</body>
</html>

效果如下圖:

css怎麼控制圖片隨意圓角樣式? (例)

其中涉及到的重要的屬性就是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讓圖片變成圓角樣式的介紹,有一定的參考價值。希望對有需要的朋友有一定的幫助。

【相關文章推薦】

php產生圓角圖片程式碼

#為div元素新增圓角邊框的操作方法

使用HTML5 Canvas繪製圓角矩形及相關的一些應用範例_html5教程技巧

CSS3圓角落、盒子陰影與邊框圖片的具體詳解

#

以上是css怎麼控制圖片隨意圓角樣式? (例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn