Применение CSS-границы к элементу с -webkit-border-image - PullRequest
Новая
       2

Применение CSS-границы к элементу с -webkit-border-image

1 голос
/ 18 февраля 2011

Я хочу иметь возможность применить градиент к границе без применения градиента к самому элементу. Документация webkit для этого подразумевает, что это должно быть возможно, но я не могу придумать способ создания черного ящика с градиентной рамкой вокруг него. Насколько я могу сказать, это ошибка с WebKit. Вот мой CSS: 

div {
    border-width: 10px 10px 10px 10px;
    width: 75px;
    height: 75px;
    background-color:#000;
    -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)) 21 30 30 21;
}

Если вы попробуете этот код для себя и запустите в Chrome или Safari, вы увидите, что веб-набор применяет градиент изображения границы ко всему элементу, а не только к границе. Есть ли способ выполнить то, что я ищу с помощью CSS, без использования каких-либо изображений? Спасибо!

Ответы [ 3 ]

3 голосов
/ 18 февраля 2011

Реализация border-image в WebKit (и, как мне кажется, во всех выпущенных в настоящее время браузерах) основана на черновом *1003* модуле Backgrounds and Borders. То, что вы хотите, это текущее поведение с ключевым словом fill:

Ключевое слово "fill", если оно присутствует, обеспечивает сохранение средней части изображения границы. (По умолчанию он отбрасывается, то есть обрабатывается как пустой.)

К сожалению, вам придется пойти с решением, подобным Gareth, пока браузеры не догонят спецификацию.

0 голосов
/ 16 октября 2011

http://jsfiddle.net/nicktheandroid/b875w/1/

Я получил его на работу ... и браузеры все еще не позволяют вам изменить ключевое слово заливки.

0 голосов
/ 18 февраля 2011

Если вы не против добавления несемантического div в вашу разметку, вы можете попробовать поместить div в div, чтобы получить эффект, следующий за этим, как это: 

<body>
   ...stuff
   <div id="fauxborder">
      <div>
         ...content here...
      </div>
   </div>
   ...more stuff
</body>

CSS: 

#fauxborder {
    width:95px; 
    height:95px; 
    background-image: -webkit-gradient(...)
}
#fauxborder div {
    margin:10px;
    background-color:#000
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...