Как сделать border градиентом
Для этого используется свойство border-image со значением linear-gradient() и border-image-slice: 1. Предварительно нужно обязательно задать обычную границу указав толщину, стиль и преобладающий на градиенте цвет.
See the Pen zLWmqq by Websitio (@Websitio) on CodePen.
Закругленные уголки и border градиентом
К сожалению, в этом случае не получится обойтись простыми свойствами и нужно немножко помудрить. С помощью ::before сделать подложку с фоновым градиентом, а сверху сам div с фоном совпадающим с общим фоном.
See the Pen vaRVyd by Websitio (@Websitio) on CodePen.
Трюк с маской
Для этого решения мы также будем использовать псевдоэлемент и свойство mask для обрезки фона
Установим фон элемента как градиент. А затем, используя свойство mask, укажем еще два градиентных фона (того же цвета, что и body (не обязательно)). Первый будет маскировать (покрывать) область в пределах границ отступа, а второй маскировать (покрывать) область вплоть до границы.
Кроме того, нужно установить mask-composite, чтобы исключить верхний слой из нижнего, чтобы увидеть границу.
See the Pen vaRVyd by Websitio (@Websitio) on CodePen.
- Предыдущий: Что такое анкор?
- Следующий: CSS псевдоклассы :nth-child и :nth-of-type
Как сделать круглый border с градиентом?
Сейчас пытаюсь так, но нагуглил что border-image и border-radius не работают вместе. Нужно то же самое что на скрине (это то, что в данный момент у меня), только чтобы border был круглый
- Вопрос задан более двух лет назад
- 1490 просмотров
Комментировать
Решения вопроса 1
Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer
У вас нет градиента. А это сильно упрощает задачу.
.div < position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 30px; >.div::before
Ответ написан более двух лет назад
Нравится 2 3 комментария
Ne7Le4Der @Ne7Le4Der Автор вопроса
Я не очень верно пример привёл, процент заполнения круга цветом $orange должен быть равен числу, т.е. там может быть
border-image: linear-gradient(to right, $orange 66%, $darkGrey 34%) ;Я так понимаю в той реализации, которую предложили вы — это сделать не получится
Сергей delphinpro @delphinpro Куратор тега CSS
Ne7Le4Der, тогда да. так не выйдет.
Сергей delphinpro @delphinpro Куратор тега CSS
Ne7Le4Der, ну а вообще простейший вариант — это два блока
на заднем градиент и паддинг, на внутреннем фон
div < background:linear-gradient(to right, $orange 66%, $darkGrey 34%) ; padding: 20px; width: 100px; height: 100px; border-radius: 100%; >div > div
Ответы на вопрос 3
Делал следующим образом: блоку, который надо обернуть, прописал стиль position: relative. И создал внутри этого блока div, с стилями:
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
right: -2px;//толщина бордера
border-radius: который нам нужен
background: градиент, который нам нужен.
Градиентные границы в CSS
Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.
Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:
- Для этого не существует простого и очевидного CSS API.
- Я просто сделаю элемент-обертку с линейно-градиентным фоном, а затем внутренний элемент заблокирует большую часть этого фона, за исключением тонкой линии заполнения вокруг него.
Выглядеть это будет как-то так:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module-border-wrap < max-width: 250px; padding: 1rem; position: relative; background: linear-gradient(to right, red, purple); padding: 3px; >.module
Если вам не нравится идея оберточного элемента, вы можете использовать псевдоэлемент, до тех пор, пока отрицательное значение z-индекса в порядке (этого не произошло бы, если бы было много вложений родительских элементов с их собственными фонами).
Вот пример Стивена Шоу, закрепляющий border-radius :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est.
.gradient-box < display: flex; align-items: center; //width: 50vw; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 30% 2em; box-sizing: border-box; $border: 5px; color: #FFF; background: #000; background-clip: padding-box; /* !importanté */ border: solid $border transparent; /* !importanté */ border-radius: 1em; &:before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -$border; /* !importanté */ border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); >> html < height: 100%; background: #000; display: flex; >body
Но не забывайте полностью о border-image , возможно, самом бестолковом свойстве CSS всех времен. Вы можете использовать его, чтобы получить градиентные границы даже на отдельных сторонах:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module
Использование как border-image , так и border-image-slice , вероятно, является самым простым синтаксисом для создания градиентной границы, но, к сожалению, это просто несовместимо с border-radius .
button < background: none; text-decoration: inherit; font-family: system-ui; font-size: 1rem; padding: 1rem 2rem; >.border-gradient < border-image-slice: 1; border-width: 2px; >.border-gradient-purple < border-image: linear-gradient(to left, #743ad5, #d53a9d); >.border-gradient-green < border-image: linear-gradient(to left, #00C853, #B2FF59); >body < height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; >div < width: 100%; text-align: center; >> div > div < width: 100%; padding: 1rem; >> .on-dark < background: #222; button < color: white; >>border с градиентом и скругленными углами css
Понадобилось мне тут, по воле дизайнера, верстать округлые кнопки с градиентной обводкой.
Да, в CSS3 конечно существует «border-image», при помощи которого можно делать градиенты для рамок. Но проблема в том, что данное CSS свойство, не работает в паре со свойством border-radius, отвечающим за скругление углов.
Есть еще варианты с имитацией бордера через псевдо-элементы или дополнительные теги. Но c псевдо элементами возникают нюансы с бэкграундами. А засорять код дополнительными тегами не хотелось.
Впав в легкое отчаяние и занимаясь уже соседним не менее заковыристым элементом. Я вдруг придумала! Как можно воплотить border с градиентом и скругленными углами, стандартными свойствами css и всего одним тегом.
a.button border: 3px solid transparent; /*Обводка нужной толщины, но прозрачная*/ background: linear-gradient(0deg, #5E17EB 0.08%, #E5097F 155.74%); /*Нужный градиент в качестве фона*/ box-shadow: inset 0px 0px 0px 100vw #fff; /*Тень направленная внутрь контейнера, перекрывает ненужный фон и оставляет только рамку*/ border-radius: 60px; /*Скругляет углы*/ /*дальше несущественно - выравнивания и отступы какие вам нужны*/ padding: 20px; margin: 5px 0; display: inline-block; >Важно - "box-shadow" должен быть достаточного размера чтобы перекрыть фон в блоке с обводкой.
У данного решения есть 2 странности, которые я пока не нашла как побороть:
- Градиент под border получается зеркально отраженным. Поэтому на фон нужно ставить не конечный градиент, а его перевернутую версию.
- Вытекает из первой. В уголках получаются вставки другого цвета.
З.Ы. Во всех браузерах не тестировала, но по идее должно работать. Если оттестировали, пишите результаты 🙂