CSS3中的顶部边框图像 [英] Top Border Image in CSS3

问题描述

我使用了 border ， border-top-image ， border-image

I've used border, border-top-image, border-image and none seem to do what I am after.

我有以下CSS：

#footer {
    overflow: hidden;
    clear: both;
    width: 100%;
    margin: 0 auto;
    padding: 26px 0 30px 0;
    border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
    font-size: 0.8461538461538462em;
    color: #aaa;
}

这似乎不适用于我正在努力工作的网站，我已经在Firefox和Chrome中尝试过了。

This does not seem to apply to the website I am trying to work on, I've tried it in Firefox and Chrome.

我只想让图片显示在顶部边框，并且没有其他边框（因此它像一个< hr /> ）

I only want the image to appear on the top border and wish to have no other borders (so it's sort of like a <hr />)

推荐答案

有任何像 border-top-image 这样的属性给元素的任何一边的图像边框 -
使用

I don't think that there is any such property like border-top-image to give image border to any side of an element - Use

border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;

但它给边框四周。

border-bottom:0;
border-left:0;
border-right:0;

它工作，这里是我的小提琴 - http://jsfiddle.net/ashwyn/c7WxG/1/

It worked and here is my fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/

这篇关于CSS3中的顶部边框图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！