css怎么控制图片随意圆角样式？（示例）-css教程-PHP中文网

css怎么控制图片随意圆角样式？（示例）

藏色散人

发布： 2018-08-14 10:59:20

原创

2975人浏览过

本篇文章主要给大家介绍如何用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">
    @@##@@
</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>
    @@##@@
</div>
</body>
</html>

登录后复制

效果如下图：