How the front-end table realizes the border in the diagram

< H2 > the border lines shown in the following figure (PS: is mainly the style of the frame, like a jagged card slot, similar to ripples) < / H2 >

Mar.09,2021

you did not learn this css
table comes with border attributes


table has merged rows and juxtaposed attributes to achieve different rectangular blocks = "colspan,rowspan as for the border style
dashednone definition without borders.
hidden is the same as "none". Except when applied to tables, where hidden is used to resolve border conflicts.
dotted defines a dotted border. Rendered as solid lines in most browsers.
dashed defines a dotted line. Rendered as solid lines in most browsers.
solid defines solid lines.
double defines double lines. The width of the double line is equal to the value of border-width.
groove defines 3D groove borders. The effect depends on the value of border-color.
ridge defines a 3D ridge border. The effect depends on the value of border-color.
inset defines 3D inset borders. The effect depends on the value of border-color.
outset defines 3D outset borders. The effect depends on the value of border-color.
inherit
if not, it can only be implemented in css and css3, for example, inverted triangle


sawtooth-border

simple explanation:

    The background images of the last two layers of
  1. are aliased so that the whole td is aliased, including border .
  2. make another layer of pure white background, put it on top and cover only padding-box , so border is still the original jagged background, and padding-box is the pure white background.
  3. the jagged background is linear-gradient , and the coverage of the background image is adjusted by background-clip .
Menu