How to make a border using CSS3 's linear gradient linear-gradient

This article mainly introduces about how to use CSS3 linear gradient linear-gradient to make the border, has a certain reference value, now share to everyone, the need for friends can refer to

Linear-gradient lines are used to make borders or compare to force, especially using their strokes can make some copy of the border effect, here we look at the use of CSS3 linear gradient linear-gradient to make a border example

The General app border stroke line is less than a pixel, then I just like the usual direct description of the 1px border, although it is 1px but the result and the app in the stroke is not the same as "thick", so in the net looked for a bit to see if there is a solution, but found a few will not find, then do, If the demand side does not want to be so coarse, it can only be solved by itself.
So we used the last method to associate a linear gradient (linear-gradient).

Css

. Line li{  Border:none;     Background-image:-webkit-linear-gradient (#222 50%,transparent 50%);     Background-image:-moz-linear-gradient (#222 50%,transparent 50%);     Background-image:-o-linear-gradient (#222 50%,transparent 50%);     Background-image:linear-gradient (#222 50%,transparent 50%);     Background-size:  100% 1px;     Background-repeat:no-repeat;     Background-position:bottombottom;}

Xml/html

<ul class= "line" >    <li>linear-gradient</li>    <li>linear-gradient</li>    <li>linear-gradient</li></ul>ok, come out again, but still a bit of a flaw, then the problem is, change the stroke position (Left,top,right,bottom) need to modify the parameters

If the left stroke needs to be changed:

Css

Background-image:-webkit-linear-gradient (left, transparent 50%, #222 50%);   Background-size:  1px 100%;   Background-position:left;

The details are not listed.

Use linear to create complex border effects
In addition, on the Internet to see a use of linear-gradient attributes to create a beautiful border effect method. First give the code, you can see the effect on your own computer:

Css

<! DOCTYPE html> 
The general idea is that we first define a white p, a colored p that defines a large circle of white squares. Two overlap, and let the white p cover the color p, the effect of the border is achieved.
There is a lot of CSS knowledge in this area.
1,: Before Pseudo-class
From the above code we can see that in fact we define a white p in the definition of a: before Pseudo-class, the color square all the styles are placed here. This is because using the: before definition makes positioning easier, as long as the top and left border widths are adjusted. Both of them become a whole.
2, Linear-gradient
This CSS method is now supported by many browsers. The method has the following three modes of usage:
①background:linear-gradient (Top, #fff, #000)
This code means that the upper part is white, and the bottom portion is too black.
②background:linear-gradient (Top,right, #fff, #000)
This code is about position passing two parameters, top and right, which means to start from top to bottom and change to the bottom left, the other reason is the same as the first one.
③background:linear-gradient (30deg, #fff, #000)
The first parameter of this code is to pass the angle, in fact the truth and position are the same, but not from the standard position began to change. So what is the correspondence between angle and position? According to the experiment, 0 degree corresponds to bottom,90 degree corresponding to left,180 degree corresponds to top,360 degree corresponding to right.
The above is the use of the linear method to achieve the beautiful border code and interpretation, we can be implemented locally, so as to discover more novel combinations of implementation methods.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!