Kesan teks CSS3
Dalam CSS3, kesan pengubahsuaian teks kaya ditambah untuk menjadikan halaman web lebih cantik dan selesa. Sifat teks CSS3 yang biasa digunakan disenaraikan di bawah:
Sifat teks CSS3
Atribut >bayang teks
pemprosesan limpahan teks
bayang-kotak Menambah satu atau lebih bayang pada kotak
perkataan -break Menentukan kaedah pemprosesan pembalut baris automatik atribut bayangan-teksSintaks:
text-shadow:x-offset y-offset warna kabur;Penerangan:
x-offset: (bayang mendatar) mewakili jarak offset mendatar bayang, unit boleh px, em atau peratusan, dsb. Jika nilainya positif, bayang-bayang diimbangi ke kanan; , unit boleh px , em atau peratusan, dsb. Jika nilai adalah positif, bayang-bayang dianjak ke bawah; em atau peratusan, dsb. Nilai kabur tidak boleh negatif. Jika nilai lebih besar, bayang lebih kabur; jika nilai lebih kecil, bayang lebih jelas. Sudah tentu, jika anda tidak memerlukan kesan kabur bayang-bayang, anda boleh menetapkan nilai kabur kepada 0;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>sifat kotak-bayangSifat kotak-bayang CSS3 dalam CSS3 sesuai untuk bayang-bayang kotak<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Tambahkan kesan kabur pada bayang
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Anda juga boleh menambah kesan bayang pada ::before dan ::after pseudo-elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>atribut limpahan teks
text-overflow: Sama ada hendak menggunakan tanda peninggalan (...) untuk menunjukkan limpahan teks dalam objek
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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">
不显示省略标记，而是简单的裁切条
</div>
<br><br>
<div class="test_demo_ellipsis">
当对象内文本溢出时显示省略标记
</div>
</body>
</html>Balut baris CSS3 balutan perkataan
Jika perkataan terlalu panjang untuk dimuatkan di dalam kawasan, ia mengembang di luar: < .
Sifat Pecah Kata CSS3 menentukan peraturan melanggar baris:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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将完全向后兼容，所以没有必要修改的设计来让它们继续运作。
网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，
这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。
</p>
</body>
</html>
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
