- 如果你不想让用户复制网站的内容，这不是一个完美的方法。用户仍然可以通过禁用 CSS 或者开发人员工具来轻松达到目的。
只用 CSS 来创建圆。
Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.
:nth-child(even)pseudo-class to apply a different background color to elements that match based on their position in a group of siblings.
Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.
position: relativeon the element establishes a Cartesian positioning context for pseudo elements.
:afterdefines a pseudo element.
background-image: url(...)adds the SVG shape (a 24×12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use the URL-encoder for SVG.
position: absolutetakes the pseudo element out of the flow of the document and positions it in relation to the parent.
width: 100%ensures the element stretches the entire width of its parent.
height: 12pxis the same height as the shape.
bottom: 0positions the pseudo element at the bottom of the parent.
Vertically and horizontally centers a child element within its parent element using
position: absolute and
transform: translate() (as an alternative to
flexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.
position: absoluteon the child element allows it to be positioned based on its containing block.
top: 50%offsets the child 50% from the left and top edge of its containing block.
transform: translate(-50%, -50%)allows the height and width of the child element to be negated so that it is vertically and horizontally centered.
If the text is longer than one line, it will be truncated and end with an ellipsis
overflow: hiddenprevents the text from overflowing its dimensions (for a block, 100% width and auto height).
white-space: nowrapprevents the text from exceeding one line in height.
text-overflow: ellipsismakes it so that if the text exceeds its dimensions, it will end with an ellipsis.
width: 200px;ensures the element has a dimension, to know when to get ellipsis
Evenly distributes child elements within a parent element.
display: flexenables flexbox.
justify-content: space-betweenevenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
justify-content: space-aroundto distribute the children with space around them, rather than between them.
Gives text a gradient color.
background: -webkit-linear-gradient(...)gives the text element a gradient background.
webkit-text-fill-color: transparentfills the text with a transparent color.
webkit-background-clip: textclips the background with the text, filling the text with the gradient background as the color.
Displays a hamburger menu which transitions to a cross on hover.
divwhich contains the top, bottom, and middle bars.
display: flex) with
wrap(alternatively, you can set both properties by a shorthand
flex-flow: column wrap).
rotate(45deg)), and the middle bar fading away by setting
transform-originis set to
leftso the bars rotate around the left point.
transition all 0.5sso that both
opacityproperties are animated for half a second.