WithCoderWithCoderWithCoder

css利用border-radius圆角来设置背景为圆角

    本文介绍如何使用 CSS 设置背景(或背景图片)为圆角。

    实现的原理是创建一个div,然后设置div的边框属性border-radius为50%,既可以实现

    示例、创建圆角div:

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_self">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache,must-ridate">
    <meta http-equiv="expires" content="0">
    <title>设置背景圆角</title>
    <style type="text/css">
        /*正常div*/
        .box0 {
            background-color: red;
            width: 200px;
            height: 200px;
        }

        /*圆角div*/
        .box1 {
            background-color: gold;
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="box0"></div>
<div class="box1"></div>
</body>
</html>

    以上代码效果如下(黄色圆形即为实现的圆角):

    1-2011031554433R.png

    以上示例,设置的是背景色background-color,我们也可以将背景色修改为背景图片。


欢迎分享交流,转载请注明出处:WithCoder » css利用border-radius圆角来设置背景为圆角