Disclaimer: The materials used in this column are written by VIP students of Kaige Academy. Students have the right to remain anonymous and have the right to final interpretation of the article. Kaige Academy aims to promote VIP students to learn from each other based on public notes.
border style
The border property can be used to control the border style of the label, and the size of the border is in px.
Commonly used border line styles:
solid solid line
none borderless line
double double line
dashed dotted line
code example:
operation result:
mind Mapping:
The border can be controlled according to the top, bottom, left and right:
border-top top border
border-bottom bottom border
border-left left border
border-right right border
code example:
operation result:
mind Mapping:
The border can also adjust the radian of the four corners:
border-radius adjusts the radian of the border. The unit can be used to adjust
the border of the photo to a circle in px and % Example:
operation result:
Example of adjusting the arc of a text box:
operation result:
You can also adjust the radian for the four corners:
border-bottom-left-radius adjusts the radian in the lower left corner
border-bottom-right-radius adjusts the radian in the lower right corner
border-top-right-radius adjusts the radian in the upper right corner
border-top-left- radius adjusts the radian of the lower right corner
Code example:
operation result:
Adjust the shadow of the component:
box-shadow can adjust the shadow area of the component, and you can also set the color of the shadow:
code example:
operation result:
Set the first two values to 0 to achieve a halo-like effect: Code example:
operation result:
Image border: border-image
Use this property to set the image to the border, and at the end, you can use round or stretch to define the image surrounding or stretching effect.
Code example:
operation result:
Code example:
operation result:
