Sample code sharing using CSS3 's linear gradient linear-gradient to make a border

Source: Internet
Author: User
Linear-gradient line is used to make a border or compare to force, especially with its stroke can make some copy of the border effect, here we look at the use of CSS3 linear gradient linear-gradient to make a border sample code sharing

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).

. 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;}
<ul class= "line" >    <li>linear-gradient</li>    <li>linear-gradient</li>    <li>linear-gradient</li></ul>

OK, and come out again, but still a bit of a flaw, then the problem is to change the stroke position (Left,top,right,bottom) need to modify the parameters

If the left stroke needs to be changed:

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:

<! DOCTYPE html> 


There is code to see, in fact, we do not use border, then the border effect is how to achieve it?
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.