Jak używać obrazu do obramowania w CSS

Question

Chcę ustawić obramowanie tabeli jako "jednolita jednolita czerń", z wyjątkiem u dołu, gdzie chcę użyć obrazu, który zawiera wskaźnik w łączu - jako pomoc wizualna.

Czy można ustawić obraz jako dolną krawędź, gdy inne krawędzie są regularne css.

Answer 1

Nie sądzę. Najprawdopodobniej lepiej jest dodać pod tabelą: <DIV>, nadać mu czarną obwódkę, stałe tło i niektóre stałe dopełnienie lub inne (aby nadać mu pewien rozmiar).

Answer 2

Można ustawić granice jak że z wyjątkiem dolnej granicy:

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

Na dolnej granicy, można ustawić obraz jako tło rzędu może.

Answer 3

Nie. Dlaczego nie spróbować w tym celu innego wiersza tabeli?

Answer 4

Spróbuj umieścić tabelę wewnątrz <div class="myTableContainer"></div> a następnie:

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

To powinno działać dobrze we wszystkich przeglądarkach.

Answer 5

Jednym z rozwiązań jest stylizacja elementu za pomocą obrazu tła w css, a następnie określenie przesunięcia dla tła w CSS. Tło może wystawać poza krawędź elementu (na przykład element div lub li). Może to być wykorzystane do wielu różnych efektów, z których jednym jest pojawienie się cienia przy użyciu czystego css.

Niektóre specyfika tutaj:

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

Answer 6

spróbować umieścić poniżej tabeli następnie ustawić jego styl jak

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

powinien działać dobrze.

Edit: i oczywiście border-top, lewo, prawo do stole "solid 1px czerni"

Answer 7

CSS3 dodano wsparcie dla border-obrazie. Więcej informacji można znaleźć pod numerem http://www.w3.org/TR/css3-background/#border-images. W tym momencie (początek 2012 r.) Prawdopodobnie nie jest bezpiecznie używać z powodu braku wsparcia we wszystkich wersjach IE. Aby śledzić, kiedy jest bezpieczny w użyciu, możesz odwiedzić stronę http://caniuse.com/#search=border-image. Jednym ze sposobów symulacji stylu obramowania jest użycie umieszczonego obrazu tła. Na przykład, aby symulować górną granicę:

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

Answer 8

Teraz jest CSS3 a border-image nieruchomość za to, ale nadal nie działa na wszystkich przeglądarkach.

OK, niech będzie tam W3Schools link na ten temat.