美文网首页
使用border-style:dotted 绘制圆角效果

使用border-style:dotted 绘制圆角效果

作者: newway_001 | 来源:发表于2019-06-23 18:30 被阅读0次
<!DOCTYPE html>
<html>
<head>
<style> 
.box {
 margin-top: 100px;
 position:relative;
width:200px;
height:200px;
box-sizing:border-box;
border: 100px dotted red
}
.box1{
position: absolute;
left:-50px;
top:-100px;
background:red;
width:100px;
height:200px;
}
.box2{
position: absolute;
left:-100px;
top:-50px;
background:red;
width:200px;
height:100px;
}
</style>
</head>
<body>

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

</body>
</html>
圆角效果.png

相关文章

网友评论

      本文标题:使用border-style:dotted 绘制圆角效果

      本文链接:https://www.haomeiwen.com/subject/tfdwqctx.html