This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕, like 👍 and add me on wechat: FrontendPicker. We invite you to join us to learn the frontend of communication and become better engineers. Click me to explore a new world!

preface

There are always people who think CSS is just a layout tool and miss the point of CSS. What is CSS full name? Cascading Style Sheets what’s the second word, Cascading Style Sheets! People often overlook the power of CSS. The same effect, different ways to achieve, there will always be good and bad, but afraid you will not one! This article focuses on the implementation of a border to learn about different properties.

border-image

I’ve written an article about this property before. Border -image – juejin.cn/post/699557…

border-image

First of all, this property is an abbreviation of the following property,

Border-image-source Specifies the resource

Border-image-slice specifies the image clipping position

Border-image-width Specifies the width

Border-image-outset specifies the amount of area to draw outside the border

Border-image-repeat this is similar to background-repeat *

implementation

Border-image-source accepts not only images but also gradients.

Note: One drawback of this implementation is that border-radius: does not work. So the rounded corner gradient border can only say bye!

Here we split the entire div and then use Streach to stretch the entire border-image.

     .border-image {
        width: 200px;
        height: 100px;
        border: 2px solid;
        border-image-source: linear-gradient(45deg.#56ECC7.#9f5ad8);
        border-image-slice: 1;
        border-image-repeat: stretch;
      }
Copy the code

Father and son background + div

Backgorund + div+ pseudo element

Looking at the previous example, one might be thinking at this point that if you can use two divs, why not just use one div with :after? Of course you can

Note: The fake element here is acting as the parent div, so make sure you add a gradient to the container and set the element white. Have you considered the case where the container has content.

.container::after { content: ""; z-index: -1; background: linear-gradient(45deg,#56ECC7 0%, #6067f3 100%); } <div class="container"> Gradient border </div>Copy the code

background-clip

This attribute is not introduced much, please refer to the previous article: “Image attributes (middle) background-attachment, clip, repeat, size, etc.” juejin.cn/post/699483…

Background – clip: content – box; The background is clipped to the edge of the Content box.

Background – clip: border – box; The background extends to the outside edge of the border (but below it).

We’ll set two gradients here, an all white gradient, and use background-Clip: Content-box to overlay the content area. Then use background-clip: border-box; To linear – gradient (45 deg, # 56 ecc7, # 6067 f3); Put it above the border. Background-origin: border-box; background-origin: border-box;

   .container {;
        border: solid 1px transparent;
        border-radius: 5px;
        background-image: linear-gradient(#fff, #fff),
          linear-gradient(45deg, #56ecc7, #6067f3);
        background-origin: border-box;
        background-clip: content-box, border-box;
        text-align: center;
        line-height: 80px;
      }
Copy the code