Можно использовать граничный радиус вместе с пограничным изображением с градиентом?

Ответ 1

Возможно, это невозможно, согласно спецификации W3C:

Фон фона, но не его border-image, привязаны к соответствующая кривая (как определено "Фон-клип). Другие эффекты, которые клип к границе или кромке (например," переполнение, отличное от "Видимый" ) также должен быть привязан к кривая. Содержание замененных элементы всегда обрезаются до кривая края содержимого. Кроме того, площадь вне кривой пограничного края не принимает события мыши от имени элемента.

Это, скорее всего, потому, что border-image может принимать некоторые потенциально сложные шаблоны. Если вам нужна закругленная граница изображения, вам нужно будет создать ее самостоятельно.

Ответ 2

Это возможно, и он не требует дополнительной разметки, но использует ::after псевдоэлемент.

Он включает в себя создание псевдоэлемента с градиентным фоном ниже и отсечение этого. Это работает во всех существующих браузерах без префиксов или хакеров поставщика (даже IE), но если вы хотите поддерживать старинную версию IE, вам следует либо рассмотреть надежные цветные резервные копии, javascript и/или пользовательские расширения MSIE CSS (т.е. filter, CSSPie-подобный векторный обман и т.д.).

Вот живой пример (jsfiddle version):

@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
}

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

.grounded-radiants::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}

<p class="grounded-radiants">
    Some text is here.<br/>
    There even a line break!<br/>
    so cool.
</p>

Ответ 3

Что делать, если вы примените градиент к фону. Затем добавьте дополнительный div внутри, с запасом, установленным на прежнюю ширину границы и с белым фоном, и, конечно, borderradius. Таким образом, вы получаете эффект границы, но на самом деле используете фон, который исправлен правильно.

Ответ 4

Это всегда работает для меня в WebKit, хотя это немного сложно!

В основном вы просто увеличиваете границу, а затем маскируете ее с более крупными и меньшими границами псевдоэлементов:).

.thing {
  display: block;
  position: absolute;
  left: 50px;
  top: 50px;
  margin-top: 18pt;
  padding-left: 50pt;
  padding-right: 50pt;
  padding-top: 25pt;
  padding-bottom: 25pt;
  border-radius: 6px;
  font-size: 18pt;
  background-color: transparent;
  border-width: 3pt;
  border-image: linear-gradient(#D9421C, #E8A22F) 14% stretch;
}
.thing::after {
  content: '';
  border-radius: 8px;
  border: 3pt solid #fff;
  width: calc(100% + 6pt);
  height: calc(100% + 6pt);
  position: absolute;
  top: -6pt;
  left: -6pt;
  z-index: 900;
}
.thing::before {
  content: '';
  border-radius: 2px;
  border: 1.5pt solid #fff;
  width: calc(100%);
  height: calc(100% + 0.25pt);
  position: absolute;
  top: -1.5pt;
  left: -1.5pt;
  z-index: 900;
}

http://plnkr.co/edit/luO6G95GtxdywZF0Qxf7?p=preview

Ответ 5

Я бы использовал SVG для этого:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="100%" height="100%" preserveAspectRatio="none">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0" style="stop-color:#0070d8" />
      <stop offset="0.5" style="stop-color:#2cdbf1" />
      <stop offset="1" style="stop-color:#83eb8a" />
    </linearGradient>
  </defs>
  <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" />
</svg>

Ответ 6

Эта альтернатива довольно новая: https://github.com/bfintal/jQuery.IE9Gradius.js

Просто включите script последний в своем теге головы, и он должен обработать все остальное. См. Примечания readme