Implémenter plusieurs bordures dynamiques de simulation d'arrière-plan

Cette fois je vais vous présenter la mise en œuvre de bordures dynamiques simulées multi-arrière-plans Quelles sont les précautions pour réaliser des bordures dynamiques simulées multi-arrière-plans Voici un cas pratique, jetons un oeil.

Regardons d'abord les rendus à réaliser

Méthode d'implémentation Comme suit

La première chose à laquelle j'ai pensé était l'attribut border, mais l'attribut border ne peut pas définir la longueur. S'il est implémenté avec des bordures, d'autres éléments doivent être utilisés pour le simuler, ce qui est plus gênant. Puis je me suis soudainement souvenu que j'avais vu quelqu'un utiliser plusieurs arrière-plans CSS3 pour simuler des frontières sur Internet, alors j'ai essayé.

arrière-plan CSS3

CSS3 a apporté quelques modifications à l'arrière-plan. La plus évidente consiste à définir plusieurs arrière-plans, ce qui n'en ajoute pas seulement 4. de nouveaux attributs, et également ajusté et amélioré les attributs actuels.

1. Plusieurs images d'arrière-plan

En CSS3, vous pouvez appliquer plusieurs images d'arrière-plan dans un seul élément de balise. Le code est similaire à la version css2.0, mais les images référencées doivent être séparées par des virgules ",". La première image est l'arrière-plan positionné en haut de l'élément, et les images d'arrière-plan suivantes sont affichées tour à tour en dessous, comme suit :

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2. Nouvel attribut : Clip d'arrière-plan

Cette discussion nous ramène à la question évoquée au début de l'article sur le fond bloqué par la frontière. L'ajout de background-clip nous donne un contrôle total sur la position de l'affichage en arrière-plan.

Les valeurs des attributs sont les suivantes :

background-clip: border; L'arrière-plan commence à s'afficher sous la bordure border

background-clip: padding; commence à s'afficher sous le remplissage au lieu de Démarrer sous la bordure

background-clip: content; L'arrière-plan commence sous la zone de contenu, pas sous la bordure ou le remplissage.

background-clip : no-clip ; Valeur d'attribut par défaut, similaire à background-clip : border;

Nouvel attribut : Background Origin

Cet attribut doit être utilisé conjointement avec

background-position. Vous pouvez utiliser background-position pour calculer le positionnement à partir de la bordure, du remplissage ou de la zone de contenu des zones de contenu. (Semblable à background-clip)

background-origin : border ; à partir de la position de la bordure

background-origin : padding à partir de la position de remplissage

background-origin : content ; à partir de la position de la zone de contenu content-box

La différence entre background-clip et background-origin est bien analysée et expliquée par le site www.CSS3. infos.

4. Nouvel attribut : Taille de l'arrière-plan

L'attribut Taille de l'arrière-plan est utilisé pour réinitialiser votre image d'arrière-plan.

a plusieurs valeurs d'attribut :

background-size: contain; Réduit l'image d'arrière-plan pour l'adapter à l'élément d'étiquette (principalement le rapport de pixels)

background-size: cover; Laissez l'image d'arrière-plan être agrandie et étendue à toute la taille de l'élément d'étiquette (principalement le rapport en pixels)

background-size: 100px 100px Indiquez la taille de l'image d'arrière-plan à mettre à l'échelle

background-size : 50 % 100 % ; Le pourcentage est basé sur la taille de l'élément de balise de contenu pour redimensionner la taille de l'image

Vous pouvez accéder au site des spécifications CSS 3 pour voir une description simple du cas.

5. Nouvel attribut : saut d'arrière-plan

En CSS3, les éléments d'étiquette peuvent être divisés en différentes zones (par exemple : laisser l'élément en ligne s'étendre sur plusieurs lignes), background- L'attribut break peut contrôler l'arrière-plan à afficher dans différentes zones.

Valeur de l'attribut :

Background-break : continu ; Cet attribut est la valeur par défaut et ignore les espaces entre les zones (leur appliquer des images équivaut à les traiter comme une seule zone)

Background-break :bounding-box ; Reconsidérer l'espacement entre les régions

     Background-break: each-box; 对每一个独立的标签区域进行背景的重新划分。

6、背景颜色的调整

     background-color属性在css3版本里面稍微做了增强，除了指定background color背景颜色之外，还可以对不使用的标签元素背景图片进行去色处理。

     background-color: green / blue;此例子里，这背景颜色可能是绿色，然而，如果底部背景图片无效的话，蓝色将代替绿色来显示。如果你没有指定某个颜色的话，它将其视为透明。

7、背景重复的调整

css2里当设置背景的时候，它经常被标签元素截取而显示不全，css3介绍了2个新属性来修复此问题。 space：图片以相同的间距平铺且填充整个标签元素 round：图片自动缩放直到适应且填充整个标签元素

CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。

8、Background Attachment 的调整

Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;)，当background-attachment设置为scroll时，背景图片是不随内容滚条滚动的。现在，有了background-attachment:local，就可以做到让背景随元素内容滚动而滚动了。

css3 多背景模拟元素边框

我们这里主要使用了background-img、background-size 和 background-position 三个属性。

background-image: [background-image], [background-image], [background-image]; 
background-position: [background-position], [background-position], [background-position]; 
background-repeat: [background-repeat], [background-repeat], [background-repeat];

简写形式如下：

background: [background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat];

现在我们用多背景来模拟一个元素的边框

/*CSS*/
.exammple {
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    background-position: left top, right top, right bottom, left bottom;
}

<p class="exammple"></p>

我们用四个渐变的背景来模拟四个边框（为什么我们要用渐变而不是直接的Color呢？这是由于Css的多背景只能是background-image, background-color不支持多个值,所有即便是纯色的边框，我们也只能使用渐变）。

接下来我们让边框动起来

/*CSS*/
.exammple {
    transition: ease-in .3s;
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 0 2px, 2px 0, 0 2px, 2px 0;
    background-position: left top, right top, right bottom, left bottom;
}
.exammple:hover {
    background-size: 100% 2px,  2px 100%, 100% 2px, 2px 100%;
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

设置滚动条样式

CSS的居中布局总结

Css3的之形状总结

三种绝对定位元素的水平垂直居中的办法

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!