css如何控制图片随意圆角样式？（示例）1

网页的本质就是超级文本标记语言，通过结合使用其他的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>

效果如下图：