Question

下图显示了所需的结果。

通常我会使用3个div来应用此类案例：

<div class="holder">
    <div class="edge left"></div>
    <div class="content">background color or image stretched here</div>
    <div class="edge right"></div>
</div>

这听起来像过度使用语义，所以我决定尝试使用border-image，这是最终结果：

但是，如果我设置背景颜色，它也将作为边框的背景（可以使用JPEG而不是带有白色背景的PNG来解决 - 但这不是解决方案 - ）。

有任何想法或建议吗？是否首先使用border-image（任何浏览器呈现可变性？）。

使用的图像和代码如下：

<ul id="nav">
   <li><a href="#">Test data Test data Test Data</a></li>
</ul>

#nav {
    border-width: 0px 38px;
    border-image: url(images/nav-border.png) 0 50;
    height: 30px;
}

https://jsfiddle.net/y7g7w1b3/

Answer 1

解决方案1：使用填充和拉伸边框图像

您可以使用以下设置通过req_index = df.index[~df.index.isin(['99'])] ax = df.ix[req_index,'count'].plot(kind="barh", figsize=(24,20), \ color = (0.10588235294117647, 0.6196078431372549, 0.4666666666666667)) y_values = ax.get_yticks().astype('int') for i,indx in enumerate(req_index): label_text = str(round(df.ix[indx,'percentage'], 4)) print label_text x = df.ix[indx,'count'] y = y_values[i] ax.annotate(label_text, xy = (x + 70000,y-3), size = 20) #break属性本身执行此操作：

border-image的值fill。（确保切片小于原始图像宽度的一半）。您可以在MDN。
border-image-slice的值stretch。

适用于IE11，Edge，Firefox v45，Opera v36，Chrome v51（dev-m）。

border-image-repeat

#nav {
  border-width: 0px 38px;
  border-image: url(http://i.stack.imgur.com/5foMd.png);
  border-image-width: 34px 98px;
  border-image-slice: 17 48 fill;
  border-image-repeat: stretch;
  height: 30px;
}
#nav li {
  line-height: 30px;
}
#nav li a {
  color: white;
}

解决方案2：使用背景颜色

但是，如果我设置背景颜色，它也将作为边框的背景

您实际上可以剪切<ul id="nav"> <li><a href="#">Test data Test data Test Data</a> </li> </ul>，使其不覆盖边框。只要形状的背景是纯色，此选项就可以工作。

background-color

#nav {
  border-width: 0px 38px;
  border-image: url(http://i.stack.imgur.com/5foMd.png) 0 50;
  background-color: rgb(34,34,34);
  background-clip: padding-box;
  height: 30px;
}
#nav li {
  line-height: 30px;
}
#nav li a {
  color: white;
}

Answer 2

我不会使用边框图像，而是使用：before和：after。这会在容器之前和之后创建2个附加元素。

以下代码：

.container{
    position: relative;
}
.container:before,
.container:after{
    position: absolute;
    top: 0;
    bottom: 0;
    content: "";
    display: block;
    width: 50px;

}
.container:before{ right:100%: }
.container:after{ left: 100%; }

这将为每侧的容器创建before和after元素。然后，您可以根据需要设置两个元素的样式。

Answer 3

您可以使用1px background-image充当background-color（我在我的示例中使用黑色，嵌入为base64）然后合并background-size，background-repeat和{{ 1}}实现目标：

类似的东西：

background-position

请参阅Fiddle

舒展与边界图象的背景图象

3 个答案: