CSS实现内凹圆角，从而实现圆角边框-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS实现内凹圆角，从而实现圆角边框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、代码

<!DOCTYPE html>
<html>

<head>
    <style>
        .uu {
            position: relative;
            width: 400px;
            height: 300px;
        }

        img {
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .box_right_top {
            background-image: radial-gradient(circle at left bottom, transparent 50px, white 0);
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            width: 50px;
            height: 50px;
        }

        .box_left_top {
            background-image: radial-gradient(circle at right bottom, transparent 50px, white 0);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 50px;
            height: 50px;
        }

        .box_right_bottom {
            background-image: radial-gradient(circle at left top, transparent 50px, white 0);
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 2;
            width: 50px;
            height: 50px;
        }

        .box_left_bottom {
            background-image: radial-gradient(circle at right top, transparent 50px, white 0);
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 2;
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="uu">
        <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        <div class="box_right_top"></div>
        <div class="box_right_bottom"></div>
        <div class="box_left_top"></div>
        <div class="box_left_bottom"></div>
    </div>
</body>

</html>

2、原理

使用了radial-gradient属性

3、效果图

CSS实现内凹圆角，从而实现圆角边框,javascript,前端,开发语言