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

Question

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

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

Answer 1

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

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

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

Answer 2

В CSS3 добавлена ​​поддержка border-image. Вы можете найти больше информации на 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;
}

Answer 3

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

ОК, давайте добавим ссылку W3Schools на эту тему.

Answer 4

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

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

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

Answer 5

Я так не думаю. Вам, вероятно, лучше добавить

ниже таблицы, дать ему черную рамку, фиксированный фон и некоторые фиксированные отступы или еще много чего (чтобы придать ему некоторый размер).

Answer 6

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

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

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

Редактировать: и, конечно же, граница сверху, слева, справа для вашего стола, «сплошной 1px черный»

Answer 7

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

Answer 8

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

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

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