Как использовать изображение для рамки в CSS

Я хочу, чтобы граница таблицы была "1px solid black", кроме нижней, где я хочу использовать изображение, которое содержит указатель на ссылку - как визуальную помощь.

Можно ли установить изображение в качестве нижней границы, когда другие границы являются регулярными css.

Ответ 1

Попробуйте поместить таблицу внутри <div class="myTableContainer"></div>, а затем:

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

Это должно хорошо работать во всех браузерах.

Ответ 2

CSS3 добавила поддержку пограничного изображения. Дополнительную информацию можно найти на http://www.w3.org/TR/css3-background/#border-images. На данный момент (начало 2012 года), вероятно, небезопасно использовать из-за отсутствия поддержки во всех версиях IE. Чтобы отслеживать, когда это безопасно, вы можете посетить http://caniuse.com/#search=border-image. Один из способов имитации стиля пограничного изображения - использовать позиционированное фоновое изображение. Например, чтобы имитировать верхнюю границу:

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

Ответ 3

Я так не думаю. Вероятно, вам лучше добавить <DIV> под столом, дайте ему черную рамку, фиксированный фон и некоторую фиксированную прокладку или еще что-то (чтобы придать ей некоторый размер).

Ответ 4

Одним из решений является стилизация элемента с фоновым изображением в css, а затем определение смещения для фона в CSS. Фон может вытолкнуть из-за края элемента (например, элемент div или li). Это может использоваться для многих разных эффектов, одним из которых является появление тени с использованием чистого CSS.

Некоторые особенности здесь:

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

Ответ 5

Теперь для этого свойства CSS3 и border-image, но все же он не работает для всех браузеров.

Хорошо, дайте ссылку W3Schools в этом разделе.

Ответ 6

Нет. Почему бы вам не попробовать другую строку таблицы для этой цели?

Ответ 7

Попробуйте поставить ниже таблицы, а затем установите его стиль, как

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

Должен работать хорошо.

Изменить: и, конечно, границы сверху, слева, справа для вашей таблицы "сплошной черный 1px"

Ответ 8

Вы можете установить такие границы, кроме нижней границы:

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

Для нижней границы вы можете установить свое изображение в качестве фона строки.