html - 一个css边框效果，请教一些思路！
本文介绍了html - 一个css边框效果，请教一些思路！的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
需要实现如图的边框效果，请问有什么好的想法！除了使用border-image外， 还有什么好的思路呢！
解决方案
套三层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>效果：
这篇关于html - 一个css边框效果，请教一些思路！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
