border-radius圆角边框正圆

最新推荐文章于 2021-08-04 08:29:52 发布

原创最新推荐文章于 2021-08-04 08:29:52 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border-radius圆角边框正

border-radius圆角边框正圆专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS创建一个带有图片的圆形背景元素。通过设置div的宽度、高度、背景颜色、边框半径及背景图片大小等属性，实现了一个简单的圆形显示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border-radius: 100px;
            background-image: url("../img/cat.jpg");
            background-size: 200px 200px ;

            /*变成正圆
            border-radius: 100px;*/
        }
    </style>
    <title></title>
</head>
<body>
<div>

</div>
</body>
</html>