Example analysis of using linear in CSS to create complex border effects-CSS Tutorial-php.cn

Example analysis of using linear in CSS to create complex border effects

高洛峰

Release： 2017-03-13 17:35:13

Original

2005 people have browsed it

This article mainly introduces the relevant information on the use of linear in CSS to create complex border effects example analysis, using the linear-gradient attribute to create gorgeous border effects

I saw it online A way to use the linear-gradient attribute to create a gorgeous border effect. First, the code is given. You can check the effect on your computer:

Example analysis of using linear in CSS to create complex border effects

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box {     
            margin: 80px 30px;     
            width: 200px;     
            height: 200px;     
            position: relative;     
            background: #fff;     
            float: left;     
        }     

            .box:before {     
                content: &#39;&#39;;     
                z-index: -1;     
                position: absolute;     
                width: 220px;     
                height: 220px;     
                top: -10px;     
                left: -10px;     
            }     

        .first:before {     
            background-image: linear-gradient(90deg, yellow, gold);     
        }     

        .second:before {     
            background-image: linear-gradient(0deg, orange, red);     
        }     

        .third:before {     
            background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);     
        }     
    </style>
</head>
<body>
    <p class="box first"></p>
    <p class="box second"></p>
    <p class="box third"></p>
</body>
</html>

Copy after login

You can see the code, in fact We don't use borders, so how do we achieve this border effect?
The general idea is that we first define a white p, and then define a colored p that is a circle larger than a white square. Overlap the two and let the white p cover the colored p to achieve the effect of a border.
There are many css knowledge points used here.

1, :beforePseudo class

We can see from the above code that we actually define one in the defined white p: The before pseudo-class puts all the styles of colored squares here. This is because using the :before definition can make positioning more convenient. Just adjust top and left to the width of the border. At the same time, the two become a whole.

2. Linear-gradient

Many browsers now support this css method. This method has the following three usage modes:①background:linear-gradient(top,#fff,#000)
This code means that starting from the top is white, to the bottom Go overboard for black.
②background:linear-gradient(top,
right,#fff,#000)This code passes two parameters about the position, top and right, which means starting from the upper right, to Changes on the lower left, other principles are the same as the first one.
③background:linear-gradient(30deg,#fff,#000)

The first parameter of this code passes the angle. In fact, the principle and position are the same, but not from the standard position. Things are starting to change. So what is the corresponding relationship between angle and position? According to experiments, 0 degrees corresponds to

bottom, 90 degrees corresponds to left, 180 degrees corresponds to top, and 360 degrees corresponds to right.

The above is the code and explanation for using the linear method to achieve gorgeous borders. You can implement it locally to discover more novel combination implementation methods.

The above is the detailed content of Example analysis of using linear in CSS to create complex border effects. For more information, please follow other related articles on the PHP Chinese website!