CSS3 文本效果
CSS3 文本效果
CSS3中包含几个新的文本特征。
在本章中您将了解以下文本属性：
text-shadow
box-shadow
text-overflow
word-wrap
word-break
CSS3的文本阴影
CSS3中，text-shadow属性适用于文本阴影。
您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
实例
给标题添加阴影:
<!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>运行程序尝试一下
CSS3 box-shadow属性
CSS3中CSS3 box-shadow属性适用于盒子阴影
实例
<!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>运行程序尝试一下
阴影添加一个模糊效果
<!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>运行程序尝试一下
CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容
<!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>运行程序尝试一下
CSS3的换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
<!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>运行程序尝试一下
CSS3 Word Breaking
CSS3 Word Breaking属性指定换行规则：
CSS代码如下：
<!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>运行程序尝试一下
neue Datei
<!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>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)