Làm thế nào để sử dụng một hình ảnh cho một đường viền trong CSS

Question

Tôi muốn đặt đường viền của một bảng là "1px đen trắng" ngoại trừ ở phía dưới, nơi tôi muốn sử dụng hình ảnh cung cấp một con trỏ vào liên kết - như một viện trợ trực quan.

Có thể đặt hình ảnh làm đường viền dưới cùng khi các đường viền khác là css thông thường không.

Answer 1

Tôi không nghĩ vậy. Có lẽ bạn nên thêm <DIV> bên dưới bảng, cho nó đường viền màu đen, nền cố định và một số đệm cố định hoặc không có thứ gì (để cho nó có kích thước).

Answer 2

Bạn có thể thiết lập đường viền như vậy trừ biên giới phía dưới:

border-top:1px solid black; 
border-right:1px solid black; 
border-left:1px solid black; 

Đối với biên giới phía dưới, bạn có thể thiết lập hình ảnh của bạn làm nền của một hàng có thể.

Answer 3

No. Tại sao bạn không thử một hàng bảng khác cho mục đích đó?

Answer 4

Hãy thử đặt bảng bên <div class="myTableContainer"></div> và sau đó:

.myTableContainer{ 
    padding-bottom: 1px; 
    background: url(myBorderImage.png) bottom left; 
} 

này nên hoạt động tốt trên mọi trình duyệt.

Answer 5

Một giải pháp là tạo kiểu cho phần tử của bạn bằng hình nền trong css và sau đó chỉ định độ lệch cho nền trong CSS. Các nền có thể poke ra từ ngoài các cạnh của phần tử (một div hoặc li phần tử ví dụ). Điều này có thể được sử dụng cho nhiều hiệu ứng khác nhau, một là sự xuất hiện của một bóng đổ bằng cách sử dụng css tinh khiết.

Một số chi tiết cụ thể ở đây:

http://www.alistapart.com/articles/cssdropshadows/

Answer 6

Hãy thử đặt một bên dưới bảng của bạn sau đó thiết lập phong cách của mình như

.bottomborder { 
    height:1px; 
    background-image:url("yourImage.png"); 
} 

nên làm việc tốt.

Edit: và tất nhiên border-top, left, right cho bảng của bạn một "rắn 1px đen"

Answer 7

CSS3 đã thêm hỗ trợ cho biên giới hình ảnh. Bạn có thể tìm thêm thông tin tại http://www.w3.org/TR/css3-background/#border-images. Tại thời điểm này (đầu năm 2012), nó có thể không an toàn để sử dụng do thiếu sự hỗ trợ trong tất cả các phiên bản của IE. Để theo dõi thời điểm sử dụng an toàn, bạn có thể truy cập http://caniuse.com/#search=border-image. Một cách để mô phỏng kiểu hình ảnh đường viền là sử dụng hình nền. Ví dụ, để mô phỏng một biên giới hàng đầu:

div 
{ 
    background-image: url('topBorder.gif'); 
    background-position: top; 
    background-repeat: repeat-x; 
} 

Answer 8

Bây giờ có CSS3 và một tài sản cho rằng border-image, nhưng nó vẫn không làm việc cho tất cả các trình duyệt.

OK, chúng ta hãy có một W3Schools link về chủ đề này.