Home > Article > Web Front-end > How to create a gradient border using CSS? 5 ways to share
How to create a gradient border using CSS? The following article will share with you 5 ways to implement gradient borders with CSS. I hope it will be helpful to you!
Setting a gradient color for the border is a very common effect. There are many ideas to achieve this effect. Today I list the methods I know for your reference. (Learning video sharing: css video tutorial, web front-end)
border-image
CSS provided The border-image attribute is used to draw complex patterns for the border. Similar to background-image, we can display image
and linear- gradient
.
Setting the gradient color border through border-image
is the simplest method, which only requires two lines of code:
CSS:
div { border: 4px solid; border-image: linear-gradient(to right, #8f41e9, #578aef) 1; } /* 或者 */ div { border: 4px solid; border-image-source: linear-gradient(to right, #8f41e9, #578aef); border-image-slice: 1; }
Codepen demo
https://codepen.io/mudontire/pen/xxLxeZw
Although this method is simple, it has an obvious flaw and is not supported. Set border-radius
. Next, we will introduce several methods to support border-radius
.
background-image
It should be easiest to use background-image
to draw a gradient background and cover the middle with a solid color One method that comes to mind is: use two boxes to overlap, set a gradient background and padding for the lower box, and set a solid color background for the upper box.
HTML:
<div class="border-box border-bg"> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora. </div> </div>
CSS:
.border-box { width: 300px; height: 200px; margin: 25px 0; } .border-bg { padding: 4px; background: linear-gradient(to right, #8f41e9, #578aef); border-radius: 16px; } .content { height: 100%; background: #222; border-radius: 13px; /*trciky part*/ }
Codepen demo
https:/ /codepen.io/mudontire/pen/ZEJEZoY
The advantage of this method is that it is easy to understand and has good compatibility. The disadvantage is that setting the content border-radius
will be tricky. and inaccurate.
background-image
, background-clip
In order to solve border-radius## in method 2 # For inaccuracies, you can use a separate element as the gradient background on the bottom layer, and set a transparent border and solid color background on the upper layer (you need to set background-clip: padding-box to avoid covering the border of the lower element) , set the same
border-radius on the upper and lower layers.
HTML:
<div class="border-box"> <div class='border-bg'></div> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora. </div> </div>
CSS:
.border-box { border: 4px solid transparent; border-radius: 16px; position: relative; background-color: #222; background-clip: padding-box; /*important*/ } .border-bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -4px; border-radius: inherit; /*important*/ background: linear-gradient(to right, #8f41e9, #578aef); }
Codepen demohttps:/ /codepen.io/mudontire/pen/yLoLrxL4. Pseudo elements, simplification of method 3We can use pseudo elements to replace
div.border-bg To simplify the HTML structure.
HTML:
<div class="border-box"> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora. </div> </div>
CSS:
.border-box { border: 4px solid transparent; border-radius: 16px; position: relative; background-color: #222; background-clip: padding-box; /*important*/ } .border-box::before { content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -4px; border-radius: inherit; /*important*/ background: linear-gradient(to right, #8F41E9, #578AEF); }
Codepen demohttps:/ /codepen.io/mudontire/pen/JjyjVwN5. Single-layer elements,
,
background-origin,
background- image
background-clip and
background-origin# respectively. ##, background-image
Each of these three attributes sets two sets of values. The first set is used to set the monochrome background in the border, and the second set is used to set the gradient color on the border.
<div class="border-box">
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
accusamus tempora.
</div>
</div>
.border-box {
border: 4px solid transparent;
border-radius: 16px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}
https:/ /codepen.io/mudontire/pen/wvqvZZO
I can think of these 5 methods currently. I personally recommend using 4 and 5 first. If there are other better methods, you are welcome to add them.
For more programming-related knowledge, please visit:
Introduction to ProgrammingThe above is the detailed content of How to create a gradient border using CSS? 5 ways to share. For more information, please follow other related articles on the PHP Chinese website!