bordures et arrière-plans CSS3 et effets de texte

Cette fois, je vais vous présenter les effets de bordure, d'arrière-plan et de texte de CSS3. Quelles sont les précautions lors de l'utilisation des effets de bordure, d'arrière-plan et de texte de CSS3. Ce qui suit est un cas pratique, prenons. un regard.

Jouez avec les bordures, les arrière-plans et les effets de texte CSS3

1. Border

box-shadow<.>

box-shadow: h-shadow v-shadow blur spread color inset(ontset);
//h-shadow：水平阴影 v-shadow：垂直阴影 blur：模糊距离 spread：阴影的尺寸 color：阴影的颜色 inset（outset）：内部阴影/外部阴影 
box-shadow: 5px 0 5px 0 #000 outset;//效果图如下

coins arrondis à rayon de bordure

border-radius: 1-4 length|% / 1-4 length|%;
//第一个参数：水平半径 第二个参数:垂直半径
border-radius: 50%/20%;//效果图如下

en définissant différentes bordures Les coins arrondis peuvent réaliser une variété de bordures

border-image

border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
//边框图片url边框内偏移 边框宽度 边框图像区域超出边框的量 边框平铺（repeated）、铺满（rounded）、拉伸（stretched）

2. Contexte

background-size Spécifie la taille de l'image d'arrière-plan

background-size: length|percentage|cover|contain;
//length：设置背景图片宽度和高度 percentage：根据父元素百分比设置背景图片宽度和高度 cover：背景图像扩展至足够大以使背景图像完全覆盖背景区域 contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-clip Spécifie la zone "dessin" de l'arrière-plan

background-clip: border-box|padding-box|content-box;

background-origin Spécifie la zone de "positionnement" de l'image de fond

background-origin: padding-box|border-box|content-box;

PS : Faites attention à la différence entre background-origin et background-clip, l'un est la zone de positionnement, l'autre est la zone de dessin

3. Text-shadow

text-shadow Text-shadow Effet

<span style="color: #800000">text-shadow: h-shadow v-shadow blur color;<br>//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 color:阴影颜色<br>text-shadow: 5px 5px 3px #000;//效果图如下</span>

le retour à la ligne permet de diviser de longs mots indivisibles et de les passer à la ligne suivante

<span style="color: #800000">word-wrap: normal|break-word;<br>//normal:只在允许的断字点换行 break-word:在长单词或url地址内部换行</span>

word-break spécifie les règles de retour à la ligne pour les textes non chinois, japonais et coréens

word-break: normal|break-all|keep-all;
// normal：使用浏览器默认换行规则  break-all：允许在单词内换行 keep-all：只能在半角空格或连字符处换行

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

Comment utiliser l'attribut de liste non ordonnée dans JS

Le texte de la liste déroulante de sélection du navigateur Safari est trop long et n'enveloppe pas la solution

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!