I. border

In fact, we must have known a lot about border. So I don't talk too much about the basics.

For example, border-radius, we just need to look at this picture:

Now let's take a look at border's true face:

    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: rgb(222,11,22);
    border-left-color: rgb(20,100,200);
    border-right-color: rgb(1,200,200);
    border-bottom-color: rgb(100,20,200);

What can we do with this? Wechat message box:

    position: relative;
    width: 150px;
    height: 50px;
    background: #fff;
    border-radius: 5px;
    line-height: 50px;
    &::after {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-right-color: #fff;
        top: 15px;
        left: -20px;
    }

See if you will encounter a small triangle in the future, is it so easy? Even if you need two. Maybe at this point, a lot of students are very unhappy. I know more about it. How about a fresh one? The officer looked down:

what? Don't tell me it's also drawn with border! The careful students should see that this is not the dashed style? It's true that dashed is used, but we know more about dashed. We can't change the distance between dashed lines. It's a headache. So there's a little bit of a coincidence in this pattern, but it reveals that the background color will penetrate underneath the border.

So, when you want to achieve a translucent border, it's not easy. You also need to combine background-clip.

_Smart classmates ask again, your design is too coincidental to achieve, in many cases, dashed can not be as we expected. Ha-ha. Next, I'll give you a perfect solution from box-shadow's explanation.

Two, box-shadow

I won't talk about one-sided shadows, two-sided shadows here. Go straight to the above topic. To implement the above pattern, first of all, you need to understand that box-shadow supports comma-separated grammar. Don't sell. Look at the code.

    width: 100px;
    height: 100px;
    background: rgb(200,100,200);
    box-shadow: 40px 0 0 -20px rgb(200,100,200),
                -40px 0 0 -20px rgb(200,100,200),
                0 40px 0 -20px rgb(200,100,200),
                0 -40px 0 -20px rgb(200,100,200);

I depend! Is it surprising that the size of the shadow can still be negative? In fact, when the shadow is negative, the shadow diffuses inward, is it amazing, is it perfect?

Here we can also use box-shadow to create the edge effect of the picture, here we need to combine transform.

    position: relative;
    width: 240px;
    height: 320px;
    background: url(../assets/images/head.jpeg) no-repeat center / 240px 320px;
    border: 5px solid #fff;
    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 150px;
        left: 70px;
        width: 150px;
        height: 150px;
        box-shadow: 5px 5px 15px 10px rgb(213,213,213);
        transform: skewX(20deg) rotate(15deg);
        z-index: -100;
    }

    &::after {
        content: "";
        display: block;
        position: absolute;
        top: 18px;
        left: 12px;
        width: 150px;
        height: 150px;
        box-shadow: 0 0 15px 10px rgba(0,0,0,.2);
        transform: skewX(20deg) rotate(15deg);
        z-index: -100;
    }

Here we have to remember that no matter how much you extend the box-shadow image, it does not affect the size of the element itself.

Three, outline

Similar to box-shadow, its size does not affect the size of elements. What I may need to say here is not to ignore outline-offset, and it can take a negative value.

    width: 100px;
    height: 100px;
    outline: 10px solid rgb(110,110,110);
    outline-offset: -45px;
    border: 10px solid rgb(110,110,110);
    border-radius: 50%;