有时候项目中我们需要边框是带有一个缺口,怎么做呢?
原理是这样的:将边框div定位,再写一个背景颜色为白色的div绝对定位去遮住某条变的边框,造成边框有缺口的假象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border: 4px solid #ff0000;
border-radius: 20px;
width: 400px;
height: 120px;
position: relative;
}
span{
display: inline-block;
position: absolute;
top: -11.5px;
left: 50%;
margin-left: -120px;
font-size: 20px;
background: #fff;
padding: 0 40px;
}
</style>
</head>
<body>
<div>
<span>全国免费服务热线</span>
</div>
</body>
</html>