所以我做了this mockup,我试图在我的按钮后面留下条纹。我尝试过使用border-image,background-image,在添加的div /按钮上使用线性渐变的边框但没有工作
https://jsfiddle.net/hoyhym/txsgcx5b/这是我最近的尝试,边框变成了一个厚黑色边框而不是图像,它显示在.header按钮但是太宽
<div class="headerbutton">
<a href="#" class="button">Ontdek ons programma</a>
</div>
.headerbutton {
text-align: center;
padding-bottom: 3rem;
margin-top: 4rem;
//border: 10px solid black;
//border-image: url(http://i.imgur.com/dCwAQsB.png) 30 repeat;
}
.button {
font-size: .8rem;
color: white;
background-color: black;
padding: .9rem .9rem .7rem;
text-decoration: none;
border: 10px solid black;
border-image: url(http://i.imgur.com/dCwAQsB.png) 30 repeat;
}
答案 0 :(得分:1)
正如我在评论中所说的那样,有点摆弄你会得到:Fiddle
.headerbutton {
text-align: center;
padding-bottom: 3rem;
margin-top: 4rem;
}
.button {
font-size: .8rem;
color: white;
padding: .9rem .9rem .7rem;
text-decoration: none;
background: rgba(0,0,0,.95);
border-image-source: url(http://i.imgur.com/dCwAQsB.png);
border-image-repeat: repeat;
border-image-width: 10px; /* thickness of the border */
border-image-slice: 0 10 10 0; /* what slices are being used?*/
border-image-outset: 0 10px 10px 0; /* how many pixels wide */
}
&#13;
<div class="headerbutton">
<a href="#" class="button">Ontdek ons programma</a>
</div>
&#13;
答案 1 :(得分:1)
更好的方法是使用伪元素:after
。
.button:after{
content:"";
position:absolute;
width:100%;
height:100%;
top:5px;
left:5px;
background: url(http://i.imgur.com/dCwAQsB.png) repeat;
z-index:-1;
}
但如果您坚持使用边框,则需要background-clip:padding-box;
以防止背景颜色为边框着色。