CSS3 text effects
In CSS3, rich text modification effects are added to make the web page more beautiful and comfortable. Commonly used CSS3 text properties are listed below:
CSS3 text properties
Description
text-overflow Text overflow processing
word-wrap Long words or URLs are forced to wrap box-shadow Adds one or more shadows to the boxword-break Specifies the processing method of automatic line wrappingIn CSS3, we can use the text-shadow property to achieve the shadow effect of text.
Syntax:text-shadow:x-offset y-offset blur color;##Description:
x-offset: (horizontal shadow) represents the horizontal offset distance of the shadow, the unit can be px, em or percentage, etc. If the value is positive, the shadow is offset to the right; if the value is negative, the shadow is offset to the left;
y-offset: (vertical shadow) represents the vertical offset distance of the shadow, the unit can be px , em or percentage, etc. If the value is positive, the shadow is shifted downward; if the value is negative, the shadow is shifted upward; blur: (blur distance) indicates the degree of blur of the shadow, the unit can be px, em or percentage, etc. . The blur value cannot be negative. If the value is larger, the shadow is blurrier; if the value is smaller, the shadow is clearer. Of course, if you don’t need the shadow blur effect, you can set the blur value to 0; color: (the color of the shadow) indicates the color of the shadow.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>box-shadow propertyThe CSS3 box-shadow property in CSS3 is suitable for box shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Add a blur effect to the shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 15px grey;;
}
</style>
</head>
<body>
<div></div>
</body>
</html>You can also add shadow effects to the ::before and ::after pseudo-elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
#boxshadow {
position: relative;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
}
/* Make the image fit the box */
#boxshadow img {
width: 90%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="boxshadow">
<img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg" alt="Norway" width="300" height="200">
</div>
</body>
</html>text-overflow attribute
text-overflow: Whether to use an omission mark (...) to mark the overflow of text within the object
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
.test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
.test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
</style>
</head>
<body>
<div class="test_demo_clip">
不顯示省略標(biāo)記，而是簡單的裁切條
</div>
<br><br>
<div class="test_demo_ellipsis">
當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記
</div>
</body>
</html>CSS3 line wrapword-wrap
If a word is too long to fit within a region, it extends outside:
In CSS3, the wrap property allows you to force text to wrap - even if that means splitting it a word in the middle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
p.test
{
width:11em;
border:2px solid blue;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">
CSS3將完全向后兼容，所以沒有必要修改的設(shè)計來讓它們繼續(xù)運作。
網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性，
這些會允許實現(xiàn)新的設(shè)計效果（譬如動態(tài)和漸變），而且可以很簡單的設(shè)計出現(xiàn)在的設(shè)計效果（比如說使用分欄）。
</p>
</body>
</html>CSS3 Word Break
CSS3 Word Breaking property specifies line breaking rules:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
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"> 為什么大羅如此讓球迷念念不忘？我們喜愛一個球星或一支球隊多少會有情愫寄托在內(nèi)。</p>
<p class="test2"> 為什么大羅如此讓球迷念念不忘？我們喜愛一個球星或一支球隊多少會有情愫寄托在內(nèi)。</p>
</body>
</html>
