0

Проблема заключается в том, что после добавления градиента для блока .logo перестал работать border-radius. Выручайте)

@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:300,400,500,700');
a.logo {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-weight: 400;
  font-size: 25px;
}

.logo {
  padding: 6px 20px 5px;
  margin-top: 0.65em;
  border: 0.115em solid transparent;
  display: inline-block;
  
  /* border */
  -moz-border-image: -moz-linear-gradient(90deg, rgba(179, 0, 255, 0.9556197478991597) 30%, rgba(42, 198, 231, 1) 100%);
  -webkit-border-image: -webkit-linear-gradient(90deg, rgba(179, 0, 255, 0.9556197478991597) 30%, rgba(42, 198, 231, 1) 100%);
  border-image: linear-gradient(90deg, rgba(179, 0, 255, 0.9556197478991597) 30%, rgba(42, 198, 231, 1) 100%);
  border-image-slice: 1;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  
  /* text */
  background: -webkit-linear-gradient(360deg, rgba(179, 0, 255, 0.9556197478991597) 30%, rgba(42, 198, 231, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<a class="logo">ЛОГОТИП</a>

2
  • border-image + border-radius = не совместимы!
    – SVE
    6 июн 2018 в 5:19
  • Делаете не border, а сплошную заливку из градиента. А внутри еще один блок с текстом и белым фоном
    – SVE
    6 июн 2018 в 5:21

1 ответ 1

0

Набросал пример с фоном и свойством border-radius. Нужно было заменить -webkit-background-clip: text; на -webkit-background-clip: padding-box; и убрать прозрачность для текста. Если возникнут дополнительные вопросы, то с радость отвечу :)

2
  • Ты просто залил блок... А мне нужно чтоб border был 5 июн 2018 в 21:04
  • Простите, если из вашего описания я не понял, что именно вы хотите сделать. Как написал человек выше вам необходим дополнительный контейнер, чтобы верстка приняла вид, соответствующий вашему дизайну :)
    – xeLL
    6 июн 2018 в 9:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.