CSS3 笔记三(Shadow/Text/Web Fonts)
2016-01-01 13:37
567 查看
CSS3 Shadow Effects
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
Values
Example
2> box-shadow
The box-shadow property attaches one or more shadows to an element
Values
Example
text-shadow demos
CSS3 Text
Values
2> word-wrap
The word-wrap property allows long words to be able to be broken and wrap onto the next line.
syntax
3> word-break
The word-break property specifies line breaking rules for non-CJK scripts.
syntax
Web Fonts
Web fonts allow Web designers to use fonts that are not installed on the user's computer.
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.
Your "own" fonts are defined within the CSS3
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
Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.
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. |
h2 { text-shadow: 0 0 3px #FF0000; } h1 { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; }
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
Value | Description |
---|---|
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. |
div { box-shadow: 10px 10px 5px grey; }
text-shadow demos
CSS3 Text
text-overflow
word-wrap
word-break
1> Text-overflow
text-overflow: clip|ellipsis|string|initial|inherit;
Values
Value | Description |
---|---|
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 |
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;
Value | Description |
---|---|
normal | Break words only at allowed break points |
break-word | Allows unbreakable words to be broken |
The word-break property specifies line breaking rules for non-CJK scripts.
syntax
word-break: normal|break-all|keep-all|initial|inherit;q
Value | Description |
---|---|
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 allow Web designers to use fonts that are not installed on the user's computer.
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.
Your "own" fonts are defined within the CSS3
@font-facerule.
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
@font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; }
Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.
相关文章推荐
- CSS3毛玻璃
- css中背景图片路径问题
- 获取css style值
- 保证CSS与JS最新
- CSS3 笔记二(Gradients)
- CSS 垂直居中。
- CSS 巧用 :before和:after
- Nancy Scripts,CSS文件夹配置
- TextView显示html样式的文字
- css中pt、px、em、ex、in等这类长度单位详细说明
- 专为控制打印设计的CSS样式
- input的值为浅淡样式(点击值消失)
- data-role="navbar" 导航框样式被挤下去
- PyCharm中HTML页面CSS class名称自动完成功能失效的问题
- 16.定位模板,布局和样式
- CSS属性简写
- WPF自定义Button样式(按钮长度随Content长度自适应)
- css bottom top left right
- CSS3:text-overflow实现文字截取,超出部分显示省略号
- CSS透明属性详解