zoukankan      html  css  js  c++  java
  • CSS3 笔记三(Shadow/Text/Web Fonts)

    CSS3 Shadow Effects

    • text-shadow
    • box-shadow

    1> text-shadow

    • The text-shadow property adds shadow to text.
    • This property accepts a comma-separated list of shadows to be applied to the text.

    syntax

    text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

    Values

    Value

    Description

    h-shadow Required. The position of the horizontal shadow. Negative values are allowed
    v-shadow Required. The position of the vertical shadow. Negative values are allowed
    blur-radius Optional. The blur radius. Default value is 0
    color Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values
    none Default value. No shadow
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.

    Example

    1 h2 {
    2     text-shadow: 0 0 3px #FF0000;
    3 }
    4 h1 {
    5     color: white;
    6     text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    7 } 

    2> box-shadow

    • The box-shadow property attaches one or more shadows to an element
    box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

    Values

    ValueDescription
    none Default value. No shadow is displayed
    h-shadow Required. The position of the horizontal shadow. Negative values are allowed
    v-shadow Required. The position of the vertical shadow. Negative values are allowed
    blur Optional. The blur distance
    spread Optional. The size of shadow. Negative values are allowed
    color Optional. The color of the shadow. The default value is black.
    inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.

    Example

    1 div {
    2     box-shadow: 10px 10px 5px grey;
    3 } 

    text-shadow demos

    CSS3 Text

    • text-overflow
    • word-wrap
    • word-break

    1> Text-overflow

    text-overflow: clip|ellipsis|string|initial|inherit;

    Values

    ValueDescription
    clip Default value. Clips the text
    ellipsis Render an ellipsis ("...") to represent clipped text
    string Render the given string to represent clipped text
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element

    2> word-wrap

    • The word-wrap property allows long words to be able to be broken and wrap onto the next line.

    syntax

    word-wrap: normal|break-word|initial|inherit;
    ValueDescription
    normal Break words only at allowed break points
    break-word Allows unbreakable words to be broken

    3> word-break

    The word-break property specifies line breaking rules for non-CJK scripts.

    syntax

    word-break: normal|break-all|keep-all|initial|inherit;q
    ValueDescription
    normal Default value. Break words according to their usual rules
    break-all Lines may break between any two letters
    keep-all  Breaks are prohibited between pairs of letters

    Web Fonts

    1. Web fonts allow Web designers to use fonts that are not installed on the user's computer.
    2. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
    3. Your "own" fonts are defined within the CSS3 @font-face rule.

    Different Font Formats

    1> TrueType Fonts (TTF)
    2> OpenType Fonts (OTF)
    3> The Web Open Font Format (WOFF)
    4> The Web Open Font Format (WOFF 2.0)
    5> SVG Fonts/Shapes
    6> Embedded OpenType Fonts (EOT)

    Example

    1 @font-face {
    2     font-family: myFirstFont;
    3     src: url(sansation_light.woff);
    4 }
    5 
    6 div {
    7     font-family: myFirstFont;
    8 } 

    Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.

  • 相关阅读:
    LA 3026 Period
    Touch
    Uva 11762 Race to 1
    清北学堂模拟赛d1t2 火柴棒 (stick)
    清北学堂模拟赛d1t1 位运算1(bit)
    常州模拟赛d8t2 绘画
    常州模拟赛d8t1 友好数对
    常州模拟赛d5t3 appoint
    常州模拟赛d7t1 亲戚
    常州模拟赛d7t3 水管
  • 原文地址:https://www.cnblogs.com/hzj680539/p/5093240.html
Copyright © 2011-2022 走看看