Можно ли заставить CSS3 border-image работать во всех современных браузерах (IE 9+, Chrome и Firefox)?

Я хочу использовать border-image для CSS-контейнера с жидкостным масштабированием. Возможно ли включить эту функциональность CSS3 во всех современных браузерах, используя некоторые.js Framework? Если нет, есть ли хорошая замена?

Пример того, чего я хочу достичь, смотрите: http://www.css3.info/preview/border-image/

Источник

3 ответа

Решение

Свойство border-image не поддерживается IE, проверьте: http://caniuse.com/border-image для поддержки браузера.

Но css3pie может позволить вам использовать изображение границы в IE 6-9: http://css3pie.com/documentation/supported-css3-features/

Источник

Короткий ответ - нет, ты не можешь.

border-image не поддерживается в IE9 или IE10. Это доступно в IE11, хотя.

Большинство других браузеров поддерживают его, но есть значительные пробелы - особенно браузер Android, который не поддерживает его ни в одной версии.

Большинство блестящих новых функций браузера, которые были представлены в последние годы, можно перенести обратно в старые браузеры, используя библиотеку Javascript polyfill. Это помогло начать использовать многие из этих функций, так как разработчики могли бы использовать новую функцию, не ставя под угрозу свой сайт слишком сильно для пользователей старых браузеров.

К несчастью, border-image не имеет поли заливок, поэтому, если вы используете его, вы просто должны признать, что пользователи IE<=10 и пользователи Android не будут видеть ваше изображение границы. Сожалею.

Исправление: Кажется, что CSS3Pie добавил поддержку полифилла для border-image, Это действительно мило; Я всегда был поклонником CSS3Pie, но я не знал, что они добавили эту функцию. Выглядит так, как будто он не на 100% полнофункциональный, но это действительно приятно иметь.

У вас по-прежнему будут проблемы с пользователями Android и некоторыми другими более старыми браузерами, но с поддержкой CSS3Pie был устранен самый большой барьер для его использования. Хороший.

Обратитесь к CanIUse, чтобы увидеть таблицу совместимости браузера для этой функции.

Источник

Попробуйте этот код. Это должно удовлетворить потребности браузеров IE:)

.borderImg{
background-image:linear-gradient(to left, rgb(255, 255, 255), rgb(221, 221, 221), rgb(221, 221, 221), rgb(255, 255, 255) 100%);
 background-repeat : no-repeat;
 background-size :600px 3px;
 background-position:bottom; 
  padding-bottom:8px;
  width:100%;
  text-align:center;
  }
<div class="borderImg">
  Applying border
</div>

Источник
Другие вопросы по тегам