CSS3 text effects
CSS3 Text Effects
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
text-shadow
box-shadow
text-overflow
word-wrap
- ##word-break
CSS3 text shadow
In CSS3, the text-shadow property applies to text shadow. You specify the horizontal shadow, vertical shadow, blur distance, and shadow color:Example
Add a shadow to the title:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果!</h1>
</body>
</html>Run the program and try it##CSS3 box-shadow property The CSS3 box-shadow property in CSS3 is applicable to box shadow
Example<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #ff2332;
}
</style>
</head>
<body>
<div>盒子阴影</div>
</body>
</html>Run the program to try it
Shadow adds a blur effect<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px #d93bb3;
}
</style>
</head>
<body>
<div>这是一个带有模糊效果的阴影</div>
</body>
</html>Run the program to try it
CSS3 Text Overflow property CSS3 text overflow property specifies how overflow content should be displayed to the user Run the program to try it CSS3 line wrapping If a word is too long , doesn't fit inside a region, it expands outside: In CSS3, the wrap property allows you to force text to wrap - even if that means splitting it a word in the middle: Run Try the program CSS3 Word Breaking CSS3 Word Breaking property specifies the newline rule: CSS code is as follows ： Run the program and try it<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 "text-overflow:ellipsis":</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.test1
{
width:9em;
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:9em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
<p class="test2"> This paragraph contains some text: The lines will break at any character.</p>
<p><b>注意:</b> word-break 属性不兼容 Opera.</p>
</body>
</html>
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~ 