Блог

<p>Понадобилось мне тут, по воле дизайнера, верстать округлые кнопки с градиентной обводкой.</p> <p>Да, в CSS3 конечно существует "border-image", при помощи которого можно делать градиенты для рамок. Но проблема в том, что данное CSS свойство, не работает в паре со свойством border-radius, отвечающим за скругление углов.</p> <p>Есть еще варианты с имитацией бордера через псевдо-элементы или дополнительные теги. Но c псевдо элементами возникают нюансы с бэкграундами. А засорять код дополнительными тегами не хотелось.</p> <p>Впав в легкое отчаяние и занимаясь уже соседним не менее заковыристым элементом. Я вдруг придумала! Как можно воплотить border с градиентом и скругленными углами, стандартными свойствами css и всего одним тегом.</p> <pre> <code class="language-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; }</code></pre> <p><strong>Важно</strong> - "box-shadow" должен быть достаточного размера чтобы перекрыть фон в блоке с обводкой.</p> <p><u>У данного решения есть 2 странности, которые я пока не нашла как побороть:</u></p> <ol> <li>Градиент под border получается зеркально отраженным. Поэтому на фон нужно ставить не конечный градиент, а его перевернутую версию.</li> <li>Вытекает из первой. В уголках получаются вставки другого цвета.</li> </ol> <p><strong>З.Ы.</strong> Во всех браузерах не тестировала, но по идее должно работать. Если оттестировали, пишите результаты :)</p>

<p>Понадобилось мне тут, по воле дизайнера, верстать округлые кнопки с градиентной обводкой.</p> <p>Да, в CSS3 конечно существует "border-image", при помощи которого можно делать градиенты для рамок. Но проблема в том, что данное CSS свойство, не работает в паре со свойством border-radius, отвечающим за скругление углов.</p> <p>Есть еще варианты с имитацией бордера через псевдо-элементы или дополнительные теги. Но c псевдо элементами возникают нюансы с бэкграундами. А засорять код дополнительными тегами не хотелось.</p> <p>Впав в легкое отчаяние и занимаясь уже соседним не менее заковыристым элементом. Я вдруг придумала! Как можно воплотить border с градиентом и скругленными углами, стандартными свойствами css и всего одним тегом.</p> <pre> <div class="geshifilter"><div class="php geshifilter-php"><pre class="de1">a<span class="sy0">.</span>button<span class="br0">{</span> border<span class="sy0">:</span> 3px solid transparent<span class="sy0">;</span> <span class="coMULTI">/*Обводка нужной толщины, но прозрачная*/</span> background<span class="sy0">:</span> linear<span class="sy0">-</span>gradient<span class="br0">(</span>0deg<span class="sy0">,</span> <span class="co2">#5E17EB 0.08%, #E5097F 155.74%); /*Нужный градиент в качестве фона*/ </span> box<span class="sy0">-</span>shadow<span class="sy0">:</span> inset 0px 0px 0px 100vw <span class="co2">#fff; /*Тень направленная внутрь контейнера, перекрывает ненужный фон и оставляет только рамку*/ </span> border<span class="sy0">-</span>radius<span class="sy0">:</span> 60px<span class="sy0">;</span> <span class="coMULTI">/*Скругляет углы*/</span>     <span class="coMULTI">/*дальше несущественно - выравнивания и отступы какие вам нужны*/</span> padding<span class="sy0">:</span> 20px<span class="sy0">;</span> margin<span class="sy0">:</span> 5px <span class="nu0">0</span><span class="sy0">;</span> display<span class="sy0">:</span> inline<span class="sy0">-</span>block<span class="sy0">;</span> <span class="br0">}</span></pre></div> </div> </pre><p><strong>Важно</strong> - "box-shadow" должен быть достаточного размера чтобы перекрыть фон в блоке с обводкой.</p> <p><u>У данного решения есть 2 странности, которые я пока не нашла как побороть:</u></p> <ol><li>Градиент под border получается зеркально отраженным. Поэтому на фон нужно ставить не конечный градиент, а его перевернутую версию.</li> <li>Вытекает из первой. В уголках получаются вставки другого цвета.</li> </ol><p><strong>З.Ы.</strong> Во всех браузерах не тестировала, но по идее должно работать. Если оттестировали, пишите результаты :)</p>

border с градиентом и скругленными углами css