border of triangular shadows and multiple borders

1. Combination of border

Border:border-width Border-style Border-color;

Border-width: Border width, cannot be a percentage, because it will not change according to the device width; similarly, outline | Text-shadow | Box-shadow also can not;

Border-style: Border style, generally with solid more, dashed (dashed), dotted (dotted line) also has;

Border-color: Border color, the default color is the text color of the element, if not set, then inherit the text color from the parent element;

The border can be set individually according to direction, up and down, Border-top | Border-bottom | Border-left | Border-right;

So properties can also be set separately, Border-top-width | Border-top-style | Border-top-color;

A single attribute can also have a combined notation:

Border-width: Upper right lower left; (clockwise direction)

Border-width: up or down;

Border-width: up or down;

Border-width: Four directions;

Border-style | Border-color can also be set as such;

You can also use combination notation according to direction:

Border-left: Border width border style border color;

2. Make graphics with border

Border of the junction is a slash, the master with this feature to make a triangle, with other properties, you can make a variety of graphics;

The principle is to control the four direction of the border color, you can make a triangle, and then control the width, you can make a variety of different obtuse, acute triangle;

<! DOCTYPE html>



I prefer to write triangles based on direction, which is easy to understand:




            . triangle{                border-left:10px solid transparent;                border-right:10px solid transparent;                border-bottom:10px solid #0ff;                /* We generally write the triangle according to the direction, so it is easy to remember, the arrows pointing to the opposite direction of the color set to you want, and then the direction of the arrow is not written, the other two direction of the color set to transperent transparent */            }



3. Shadows of the small triangle

Triangles are made, but when we define a Box-shadow for an element, the following occurs:


If you do not want the shadow, very good solution, delete the triangle of the Box-shadow is good;

In practical applications, we need shadows in many cases, but shadows appear on the two sides of the triangle and shadow the container;


We can add an element, also written as a triangle, set the level is smaller than the arrow and the container element, and set the filter, the position is slightly higher than the arrow, exposing the edge of the part can be;

When we delete the previous arrows, it is

Finished product: PS: Filter also has compatibility issues, recommended to use Google Browser testing;

Here's the code:

<!        DOCTYPE html>


4. Border of the small triangle

The triangle shadow problem can be solved this way, the same way, the triangle border can also be:

Write a triangle, sank under the arrow, the color is set to the border color, the position is slightly higher than the arrow (container border width value), you can;

Next I use: After and: Before write the triangle and the border, the same way the above shadow can do so;




<!        DOCTYPE html>

5. Border-radius Fillet

CSS3 attribute Border-radius, "border radius", value can be used px, EM, pt, percentage, etc.;

Border-radius supports Four corners using different radians, the direction is left upper-right-upper-right-bottom-left (from the top left , clockwise);

Border-radius can also be set individually for each corner:

Border-top-left-radius

Border-top-right-radius

Border-bottom-right-radius

Border-bottom-left-radius

Individual settings can write two values, the first value is the horizontal radius, the second value is the vertical radius, and if there is only one value, the horizontal and vertical are equal;




<! DOCTYPE html>


Of course, the most we use for this property is to draw a circle, set the value to half and above the width (50% and above), border-radius:50%, I will not raise the column;


6. Multiple borders

Outline making multiple borders

Some requirements are outside the border and border, we can use outline to write, there is a related property outline-offset, you can control the position of the stroke and the edge of the relationship, can be set to a negative value;

Outline make multiple borders, at most only two layers, and can not be curved;




<! DOCTYPE html>


Box-shadow Making multiple borders

Box-shadow can do a lot of layers (more will be very card, computer performance problems), and with the Border-radius attribute can be made arc;

Box-shadow is not occupy space, so unable to respond to events, we can use the inset set into the inner shadow, in the expansion of space is good;




<!        DOCTYPE html>