Key Knowledge points
1. Border-style
Border-style has four properties: dotted solid double dashed (dotted, solid, double, dashed)
Four properties: upper right and lower left
Three properties: up or down
Two properties: up or down
One property: Up or down
Border-style:dotted solid double dashed;
/* Top Border is dotted to the right border is the
bottom of the solid line is a
two-line
left box is a dashed line
*
Border-style:dotted solid double;
/* The top border is a dotted border is a
solid
Bottom border is a double line
* *
Border-style:dotted solid;
/* Top and Bottom boxes are dotted
right and left borders are solid lines.
border-style:dotted;
/*
4 borders are dots
* *
2. Outline
outline:2px dashed #fff; /* Border width Border style border color * *
3. Outline-offset
outline-offset:5px; /* Can be negative * *
property to set the offset of the outline frame outside the border edge
Outlines differs from the border in two aspects: outlines does not occupy space; outlines may not be rectangular 4. Border-radius
border-radius:5px; /* Set Border rounded corners * *
Implementation Effect
Implementation Code
<! DOCTYPE html>
Note: Browser compatibility, Outline-offset not compatible with IE