cari

Rumah  >  Artikel  >  hujung hadapan web  >  css怎么控制图片随意圆角样式？（示例）

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

藏色散人
藏色散人asal
2018-08-14 10:59:202640semak imbas

本篇文章主要给大家介绍如何用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>

效果如下图：

7195b4eac7f080f194e1ca9ca70a84b.png

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>

效果如下图：

9771653fbf27351db67d8fa62dc36c5.png

其中涉及到的重要的属性就是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圆角、盒阴影与边框图片的具体详解

Atas ialah kandungan terperinci css怎么控制图片随意圆角样式？（示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何使用纯CSS实现一只移动的小白兔动画效果Artikel seterusnya：总结ajax中各个参数含义的解释

Artikel berkaitan

Lihat lagi