css3 边框实现圆角内凹效果边框内凹圆角效果

最新推荐文章于 2023-06-08 11:14:13 发布

gzyzwx

最新推荐文章于 2023-06-08 11:14:13 发布

阅读量7.3k

点赞数 3

分类专栏： css web前端

本文链接：https://blog.csdn.net/gzyzwx/article/details/104037157

版权

web前端同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

border-radius: 20px; 会有圆角效果，但是效果是向外的；

效果截图：（移动端展示也一样）

想要实现（边框圆角内凹效果）

查阅资料，暂无属性可设置，只能自己撸；（思路是实现四个圆角然后遮挡在四个边角，实现。）

注意有坑

实现方案一

<html>

<head>
    <meta name="viewport" content="width=750, user-scalable=no, viewport-fit=cover">
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        .box {
            margin-top: 100px;
            margin-left: 100px;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }
        .border {
            position: absolute;
            width: 40px;
            height: 40px;
            border: 1px solid #fff;
            z-index: 1;
            background: #fff;
        }
        .ceshi {
            position: relative;
            border-radius: 0px 0px 40px 0px;
            border-bottom: 1px solid red;
            border-right: 1px solid red;
        }
        .left.top {
            top: 0px;
            left: 0px;
            border-radius: 0px 0px 40px 0px;
            border-bottom: 1px solid red;
            border-right: 1px solid red;
        }
        .right.top {
            top: -1px;
            right: -1px;
            border-radius: 0px 0px 0px 40px;
            border-bottom: 1px solid red;
            border-left: 1px solid red;
        }
        .left.bottom {
            left: -1px;
            bottom: -1px;
            border-radius: 0px 40px 0px 0px;
            border-top: 1px solid red;
            border-right: 1px solid red;
        }
        .right.bottom {
            right: -1px;
            bottom: -1px;
            border-radius: 40px 0px 0px 0px;
            border-top: 1px solid red;
            border-left: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="border ceshi"></div>
    <div class="box">
        <div class="border left top"></div>
        <div class="border right top"></div>
        <div class="border left bottom"></div>
        <div class="border right bottom"></div>
    </div>
</body>

</html>

效果如图

pc 端效果没啥问题

移动端就有问题了，解决方案
（1、调整四个内部元素定位）
（2、.box 增加 border-radius: 53px; 值不等于 40px）

方案二：（增加一个共同父级，让父级去约束）

<html>

<head>
    <meta name="viewport" content="width=750, user-scalable=no, viewport-fit=cover">
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        .content {
            position: relative;
            margin-top: 100px;
            margin-left: 100px;
            width: 200px;
            height: 200px;
            /* overflow: hidden; */
        }
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        .border {
            position: absolute;
            width: 80px;
            height: 80px;
            border: 1px solid red;
            z-index: 1;
            background: #fff;
            border-radius: 50%;
        }
        .left.top {
            top: -40px;
            left: -40px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="box">
        </div>
        <div class="border left top"></div>
    </div>
    
</body>

</html>

截图

开启overflow:hidden;(不好的事情发生了)

多了两条不想要的边框

解决方案

只能增加.content {border-radius: 50px;}

有其他好方案，欢迎各位大佬评论指点下。

gzyzwx

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
css3 边框实现圆角内凹效果边框内凹圆角效果

border-radius: 20px; 会有圆角效果，但是效果是向外的；效果截图：（移动端展示也一样）想要实现（边框圆角内凹效果）查阅资料，暂无属性可设置，只能自己撸；（思路是实现四个圆角然后遮挡在四个边角，实现。）注意有坑实现方案一<html><head> <meta name="viewport" content=...
复制链接

扫一扫