问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

一个css边框效果，请教一些思路！

头像
halokitiboy
    24263962

    需要实现如图的边框效果，请问有什么好的想法！除了使用border-image外， 还有什么好的思路呢！
    clipboard.png

    htmlcss
    阅读 2.9k
    1 个回答
    得票最新
    头像
    boxsnake
      6.8k21249
      ✓ 已被采纳

      套三层div，每个div通过父级的div进行绝对定位，至于圆点，可以使用独立的div通过绝对百分比定位，固定在相应位置。

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .box {
        position: relative; /* 这个一定要，否则里面的box1-3会以body对齐 */
        height: 200px;
        width: 200px;
        padding: 5px;
    }

    .box1,
    .box2,
    .box3 {
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 5px;
        right: 5px;
        border-radius: 7px;
        border: 2px solid rgb(204, 104, 177);
    }

    .circle {
        position: absolute;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        background-color: rgb(164, 288, 255);
    }

    .circle1 {
        left: 50%;
        bottom: 0;
        margin-left: -15px;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <div class="box2">
                <div class="box3"></div>
            </div>
        </div>
        <div class="circle circle1"></div>
    </div>
</body>
</html>

      效果：
      clipboard.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题