Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use CSS to create a gradient frame. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Setting gradual discoloration to border is a very common effect, and there are many ideas to achieve this effect. Today, I list the methods I know here for your reference. (learn video sharing: css video tutorial)

1. Use border-image

CSS provides the border-image attribute to draw complex patterns for border, and similar to background-image, we can show image and linear-gradient in border.

Setting the gradient border through border-image is the easiest way, requiring only two lines of code:

CSS:

Div {border: 4px solid; border-image: linear-gradient (to right, # 8f41e9, # 578aef) 1;} / * or * / 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

This approach is simple but has an obvious drawback and does not support setting up border-radius. Next, I'll introduce several ways to support border-radius.

two。 Use background-image

Using background-image to draw a gradient background and covering the middle with a solid color should be the easiest way to think of. The idea is to use two boxes to stack, set the gradient background and padding for the lower box, and set the solid background for the upper box.

HTML:

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.

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 advantages of this approach are easy to understand and good compatibility, while the disadvantage is that setting the border-radius of content will compare tricky and is not accurate.

3. Two layers of elements, background-image, background-clip

To solve the problem of border-radius inaccuracy in method 2, you can use a single element as a gradient background on the bottom layer, the upper layer sets a transparent border and a solid background (you need to set background-clip: padding-box to avoid covering the border of the lower elements), and the upper and lower layers set the same border-radius.

HTML:

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.

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 demo

Https://codepen.io/mudontire/pen/yLoLrxL

4. Pseudo elements, simplification of method 3

We can replace div.border-bg with pseudo elements to simplify the HTML structure.

HTML:

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.

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 demo

Https://codepen.io/mudontire/pen/JjyjVwN

5. Single-layer elements, background-clip, background-origin, background-image

Finally, I think the most elegant method, only need to use single-layer elements, for its respectively set background-clip, background-origin, background-image these three properties, each property sets two sets of values, the first group is used to set the monochrome background in border, the second group is used to set the gradient on the border.

HTML:

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.

CSS:

.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,# 2222), linear-gradient (90deg, # 8F41E9, # 578AEF);}

Codepen demo

Https://codepen.io/mudontire/pen/wvqvZZO

This is the end of this article on "how to create a gradient frame with CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.