-
CSS3 Tutorial
- CSS3 Tutorial
- CSS3 Introduction
- CSS3 frame
- CSS3 Fillet
- CSS3 background
- CSS3 Gradient
- CSS3 Text effects
- CSS3 Fonts
- CSS3 2D Conversion
- CSS3 3D Conversion
- CSS3 transition
- CSS3 Animation
- CSS3 Multiple columns
- CSS3 User Interface
- CSS3 image
- CSS3 Button
- CSS3 Tab
- CSS3 Box size
- CSS3 Elastic box
- CSS3 Multimedia query
- CSS3 Multimedia query examples
CSS3 Text Effects
CSS3 Text Effects
CSS3 text contains several new features.
In this chapter you will learn the following text attributes:
- text-shadow
- box-shadow
- text-overflow
- word-wrap
- word-break
Browser Support
| 属性 | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
The text shadow CSS3
In CSS3, text-shadow property applies to text shadows.
You specify the horizontal shadow, the vertical shadow, color, distance blur and shadows:
Examples
Add a shadow to the title:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
{
text-shadow: 5px 5px 5px #FF0000;
}
CSS3 box-shadow property
In CSS3 CSS3 box-shadow property applies to shadow box
Examples
div {
box-shadow: 10px 10px;
}
box-shadow: 10px 10px;
}