Interesting border in CSS

Border

To put it simply, it is the frame we use, a very basic usage, which is

BORDER:1PX solid black;//is equivalent to Border-width:1px;border-style:solid;border-color:black;

Here's how the demo works:

Of course, you can also define a lot of odd-shaped border types, such as rounded corners (radius, may not be very good compatibility), ellipse (in fact, as long as you understand the ellipse, the border can be drawn freely).

Border 1px solid black;border-radius:50%;

Border-top,-right,-bottom,-left

Having seen so many interesting demos, do you really understand the borders?

Recently encountered an interesting CSS style, let me have a very deep understanding of the border. Usually we use the border, basically to give the border a width, 1px, occasionally 2px, and did not find the relationship between the border and elements, when we put the border-width for a larger value, the problem comes.

border:20px solid Gray;

Also, the border is a value that can be set separately top,right,bottom,left:

border:20px solid gray;border-top-width:40px;border-left-width:40px;

The border and border of the junction how to judge it?

It's important to understand this, and if you find out about it, here's something interesting:

border:20px Solid;border-top-color:black;border-right-color:red;border-bottom-color:gray;border-left-color:blue ;

Actually is the inner vertex and the outer vertex line separates the border, if the element width and height are set to 0, plus a radius:

width:0;height:0;border-radius:50%;

The principle of Border-radius in front of you should also understand!

Implement arrows with border

Knowing some of the basics of border, we can implement arrows that are common to dialogs, like this:

This need to rely on the transparent transparent in CSS, for example, we need a right arrow, refer to the above width and height of the example of 0 o'clock, the corresponding border size 15px,0px,15px,30px, first look at the following example

border-width:15px 0px 15px 30px;border-color:black gray;border-style:solid;

This time we need to set the color of Border-top and border-bottom to be transparent,

Border-color:transparent Gray;

So, for the other three angles of the arrows can also be designed in the same way:

Summarize

Read this article, is not feel border function is very powerful, in fact, some of our common bubbles and shapes can be achieved with border, haha, very despise those who use pictures of the classmate. Share.

