Cette fois, je vais vous montrer comment utiliser l'attribut css3 border. Quelles sont les précautions lors de l'utilisation de l'attribut css3 border Voici un cas pratique, jetons un coup d'oeil. .
Border en CSS3. Cela ne nous est pas étranger. Combien de fois avons-nous écrit border:1px solid red... Alors quelles surprises CSS3 nous apportera-t-il ?
En CSS3, la bordure a 4 nouvelles fonctionnalités
1.Border-color(Définir la couleur de la bordure)
2.Border-image (défini comme bordure à travers l'image)
3.Border-radius (rayon de la bordure)
4.box-shadow (effet d'ombre)
Les versions de navigateur que j'utilise sont : IE8, FireFox10.0.9, Chrome 22.0.1229.94, Safari 5.1.7, Opera 12.50. . . En gros, ce sont la dernière version
Quand on voulait ajouter une bordure à un p avant, on écrivait comme ça
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
}
</style>
</head>
<body>
<p class='border_test'>常用的边框样式</p>
</body>
</html>border-color
Puisque nous pouvons déjà définir la couleur de la bordure, pourquoi avons-nous besoin de border-color ? Parce que la bordure de CSS3 est différente
Utilisez border-color si vous définissez la largeur de la bordure sur X. Ensuite, vous pouvez utiliser X couleurs sur cette bordure, chaque couleur affichant une largeur de 1 px (ps : si la largeur de votre bordure est de 10 px et que vous ne définissez que 5 couleurs, alors la dernière couleur remplira la largeur restante ci-dessous)
Voir le code ci-dessous pour la méthode d'écriture spécifique
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
border-color:red blue green black;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-color样式</p>
</body>
</html>Mais le résultat est différent de ce que nous pensions.
Nous, je n'en ai vu que 4 bordures correspondant à 4 couleurs. Elles sont en haut, à droite, en bas et à gauche.
Bien sûr, si nous ne saisissons que 3 couleurs, la couleur du milieu correspondra à gauche et à droite.
Alors ce que nous avons dit auparavant est l'effet d'une couleur par pixel. Étoffe de laine? Ne vous inquiétez pas. "Ensuite, vous pouvez utiliser X couleurs sur cette bordure." Parce que border-color concerne les 4 bordures entières, ce n'est pas pour une certaine bordure
Si nous devons le faire, ce qui précède. les effets peuvent être définis pour une certaine frontière. Ce sont :
border-top-color
border-right-color
border -bottom-color
border-left-color
Nous devons donc changer le code
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-moz-border-bottom-colors:Blue Yellow Red Black Green;
-moz-border-right-colors:Blue Yellow Red Black Green;
-moz-border-left-colors:Blue Yellow Red Black Green;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-color样式</p>
</body>
</html>en run Y a-t-il un effet après
Bien que je ne puisse pas voir clairement, il semble que chaque pixel ait une couleur, ce qui le rend beaucoup plus pratique si nous voulons faire un dégradé de couleur. , il suffit d'ajuster la couleur
.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-ms-border-top-colors:Blue Yellow Red Black Green;
-wekit-border-top-colors:Blue Yellow Red Black Green;
-o-border-top-colors:Blue Yellow Red Black Green;
border-top-colors:Blue Yellow Red Black Green;
}Cependant, il a été constaté que l'effet n'apparaissait que sur Firefox, c'est-à-dire la bordure. L'attribut -border-colors n'est disponible que sur Firefox. Il est disponible sur Firefox, mais il n'est pas compatible avec les autres...
Border-image.
border-image utilise principalement des images pour remplir la bordure.
Les attributs de décomposition de border-image sont respectivement
border-image-source spécifie l'url de l'image d'arrière-plan de border
border-image-slice définit les propriétés de la façon de découper l'image, sans positionnement !
border-image-width définit la zone d'affichage de border-image
border-image-repea
Analysons-le un par un.
border-image-source
C'est l'url qui précise l'image de fond de la bordure, par exemple
border-image-source ：url(../images/border.gif);
Ceci peut être défini sur aucun, c'est-à-dire aucune image d'arrière-plan
border-image-slice
设置图片如何切割的属性，（重点理解）他的值是四个数值, 没单位(实际上是已经固定是px了, 注意, 这个值不能是负值或大于图片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得没错, 同样对应的是”上右下左”,将这几个数值, 把背景图片, 切割开来,具体一会再说
border-image-width
定义border-image的width, 这个是定义border-image的显示区域的(这个只是在w3c上描述的, 但在实际测试过, 设置这个属性没有作用, 但是border-width能生效)
border-image-repeat;
repeat有三个值选择
[ stretch | repeat | round ]：拉伸 | 重复 | 平铺 (其中stretch是默认值。)
好了，我们回头来看slice,也就是切割.= =说实话，不知道该怎么讲,还是上图吧.
左上图是一个这样的样式.border-image-slice:10 15 20 25; 他会将图片分割为右上边这样的9宫格图片.
left,top,right,bottom分别是你设置的距离，这一部分会被抽取出来作为边框.
top-left, top-right, bottom-left, bottom-right同样会被抽取出来，与left,top,right,bottom不同的是，他们不会受repeat,stretch,round的影响.
而left,top,right,bottom,则有可能因为拉伸什么的而改变宽度和高度.不知道这样说会不会容易理解点?
下面看代码
<html>
<head>
<style type="text/css">
.border_test
{
-webkit-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-moz-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-o-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-ms-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
color:white;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-image样式</p>
</body>
</html>效果如下
用的材料图是
同样可惜的是，我这里只有FireFox和Safari出了效果，当然这也不能排序Chrome不能，因为听说有几个版本的可以。
Border-radius
终于到圆角了，感觉花了那么多字去写css3有点怪，因为本来很简单的- -哈
border-radius
参数:半径，不可以是负数，为0的话是直角
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-border-radius:15px;
-ms-border-radius:15px;
-wekit-border-radius:15px;
-o-border-radiuss:15px;
border-radius:15px;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-radius样式</p>
</body>
</html>效果
圆角效果是比较常见的，而且在FireFox,Chrome,Safari,Opera都支持圆角效果，可惜IE还是只能回老家喝粥.不过据说IE9支持了。
相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
分别对应一个位置，需要注意的是，如果只有一个，会变成4分之1圆角，如果这4个里其中一个为0，那就回变成直角- -这个我也很纳闷.
box-shadow
最后一个，阴影
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-box-shadow:5px 2px 6px black;
-ms-box-shadow:5px 2px 6px black;
-wekit-box-shadow:5px 2px 6px black;
-o-box-shadow:5px 2px 6px black;
box-shadow:5px 2px 6px black;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-shadow样式</p>
</body>
</html>
三个像素值和颜色分别是
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Quelle est la différence entre href et src, link et @import
Comment utiliser l'héritage de valeur d'attribut en CSS
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
