This is the 20th day of my participation in the August More Text Challenge

The text

text-shadow

Text-shadow Adds a shadow to the text. Each shadow value consists of the offset of the element in the X and Y directions, the blur radius, and the color value.

Grammar:

text-shadow: offset-x offset-y blur-radius color;
Copy the code
  • <color>: optional. It can be specified before or after the offset.

    Specify a color explicitly if you want to ensure consistency across browsers

  • <offset-x> <offset-y>: Specifies the offset of the shadow relative to the text.
    • <offset-x>: Specifies the horizontal offset, if negative the shadow is to the left of the text.
    • <offset-y>: Specifies the vertical offset, if negative the shadow is above the text.
  • <blur-radius>Optional, the larger the value, the larger the blur radius, the larger and lighter the shadow.

Texts are also shaded if they exist.

text-shadow: #fc0 1px 0 10px;
text-decoration: green wavy underline;
Copy the code

You can also add multiple shadows, separated by commas, to create a neon effect:

text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2 em blue;
Copy the code

text-overflow

Text-overflow: How to signal to the user that an overflow content is not displayed, which can be clipped or displayed with an ellipsis.

  • clip: The default value, directly truncate the text.
  • ellipsis: Represents truncated text with an ellipsis that is added to the content area, thus reducing the amount of text displayed. If the space is too small to accommodate an ellipsis, the ellipsis will also be truncated.

Note that this property only works for content that overflows at the block level, but must be inline with the block-level element (a counterexample: content overflows below the box). It will not take effect.

In order for text-overflow to work, we usually do some configuration:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Copy the code

word-break

Word-break specifies how to break a word.

  • normal: Use the default line breaking rule.
  • break-allFor non-CJK text, the line can be broken at any character.
  • keep-allCJK text lines continuously, and non-CJK text behaves the same as normal.

Custom fonts

@font-face, which allows us to specify online fonts for our websites (automatically downloaded to users who need them), eliminates the need for fonts on users’ computers.

  • font-family: Defines the font name
  • src: URL of the remote font file location (url) or the font name on the user’s computerlocalThe syntax specifies the font on the user’s local computer by name. If the font cannot be found, another source will be tried until one is available.

To use a bold font, you must add a @font-face rule that includes bold text.

Example: A New font was defined, using the font Times New Roman for normal text and Consolas for bold text.

@font-face {
  font-family: myFirstFont;
  src: local("Times New Roman");
  font-weight: normal;
}

@font-face {
  font-family: myFirstFont;
  src: local(Consolas);
  font-weight: bold;
}
Copy the code

Brief introduction to the new characteristics of CSS3

  • Border Border
  • Background & Gradient
  • Text Indicates the Text & @font-face
  • Transform element Transform
  • Transition effect
  • Animation Animation
  • Column Multi-column layout
  • Resize & Box-sizing & Outline-offset
  • Images into the order
  • Button in the advanced
  • Multimedia Query