Question

我使用 border-image 标记在css中创建自定义边框。我使用的背景颜色与边框颜色相同。但它并没有填满整个高度。

<!DOCTYPE html>
<html>
<head>
<style>

 div{
 border:15px solid transparent;
 width:250px;
 }

 div p {
 background-color: #74c7a9;
 padding-right: 20px;
 padding-bottom: 20px;
 }


 #round {
 -webkit-border-image:url(border2.png) 30 30 round; /* Safari 5 */
 -o-border-image:url(border2.png) 30 30 round; /* Opera */
 border-image:url(border2.png) 30 30 round;
 }

 </style>
 </head>
 <body>


 <div id="round">
  <p>Here, the image is tiled (repeated) to fill the area. 
  </p>
 </div>

</body>
</html>

Answer 1

你应该以一个问题的形式提出问题（我猜这就是为什么这个问题被忽略了），但我认为你正在寻找CSS属性box-sizing: border-box。

MDN关于盒子大小的文章：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

您在p背景和div边框之间看到的空间是p的边距（顶部和底部）。

您可以使用

将其设置为关闭

p {
    margin: 0px;
}

如果您觉得这种方式太小，请添加

p {
    padding-top: 20px;
}

或者，否则（可能更容易）在div中设置背景而不是在p

中

自定义边框css和背景图像

2 个答案: