Effets de texte CSS3
En CSS3, des effets de modification de texte enrichi sont ajoutés pour rendre la page Web plus belle et plus confortable. Les propriétés de texte CSS3 couramment utilisées sont répertoriées ci-dessous :
Propriétés de texte CSS3
Attributs >text-shadow
Traitement du débordement de texte
box-shadow ajoute une ou plusieurs ombres à la boîte
mot -break spécifie la méthode de traitement du retour à la ligne automatique attribut text-shadowSyntaxe :
text-shadow:x-offset y-offset Blur Color;Description :
x-offset : (ombre horizontale) représente la distance de décalage horizontal de l'ombre, l'unité peut être px, em ou pourcentage, etc. Si la valeur est positive, l'ombre est décalée vers la droite ; si la valeur est négative, l'ombre est décalée vers la gauchey-offset : (ombre verticale) représente la distance de décalage vertical de l'ombre ; , l'unité peut être px , em ou pourcentage, etc. Si la valeur est positive, l'ombre est décalée vers le bas ; si la valeur est négative, l'ombre est décalée vers le haut
flou : (distance du flou) indique le degré de flou de l'ombre, l'unité peut être px, em ou pourcentage, etc. La valeur du flou ne peut pas être négative. Si la valeur est plus grande, l'ombre est plus floue ; si la valeur est plus petite, l'ombre est plus claire. Bien sûr, si vous n'avez pas besoin de l'effet de flou d'ombre, vous pouvez définir la valeur de flou sur 0 couleur : (la couleur de l'ombre) représente la couleur de l'ombre ;<!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>propriété box-shadowLa propriété CSS3 box-shadow en CSS3 convient aux ombres de boîte<!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>Ajouter un effet de flou à l'ombre
<!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>Vous pouvez également ajouter des effets d'ombre aux pseudo-éléments ::before et ::after
<!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>attribut text-overflow
text-overflow : s'il faut utiliser une marque d'omission (...) pour indiquer le débordement de texte dans l'objet
<!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>retour à la ligne CSS3 retour à la ligne
Si un mot est trop long pour tenir à l'intérieur d'une région, il s'étend à l'extérieur :
En CSS3, la propriété wrap vous permet de forcer le retour à la ligne du texte - même si cela signifie le diviser en un mot au milieu :
<!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> Saut de mot CSS3
La propriété CSS3 Word Breaking spécifie les règles de saut de ligne :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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"> 为什么大罗如此让球迷念念不忘？我们喜爱一个球星或一支球队多少会有情愫寄托在内。</p>
<p class="test2"> 为什么大罗如此让球迷念念不忘？我们喜爱一个球星或一支球队多少会有情愫寄托在内。</p>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
