看看黄色一级片,日韩精品欧美,69堂免费视频

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

本篇文章主要給大家介紹如何用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" />
</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讓圖片變成圓角樣式的介紹，有一定的參考價值。希望對有需要的朋友有一定的幫助。

【相關文章推薦】

php生成圓角圖片代碼

給div元素添加圓角邊框的操作方法