Css3 border-image 设置交替出现的边框
发布网友
发布时间：2022-04-06 11:55
共2个回答
热心网友
时间：2022-04-06 13:24
.border-image {
border: 18px solid #000;
border-image: url(img/border.jpg) 27 round;
}
</style>
<div style="width: 100px; height: 100px;" class="border-image"></div>
热心网友
时间：2022-04-06 14:42
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.borClass {
border:15px;
background-color: yellow;
width:300px;
border-image:url(border1.png) 25 round;
}
.borClass div {
width: 300px;
height: 100px;
background-color: white;
}
</style>
</head>
<body>
<div class="borClass">
<div>
在这里，图片铺满整个边框。
</div>
</div>
</body>
</html>
</html>
用上面那张图片
追问
按照你的方案，效果图是上面那个，四角感觉有重叠，明显大很多；然后，最里边的实线部分没有15px，立项状态应该是每个红色宽度是15px，间隙也是15px，实现宽度也是15px
为什么这里border-image使用25？这样的话，虚线的那根实现宽度就很窄了，和期望图有点差距
