Conseils pour utiliser CSS pour manipuler les bordures

在CSS里，border是控制对象的边框边线宽度、颜色、虚线、实线等样式的CSS属性。border属性多种多样，今天就来给大家说一些关于操作border的小技巧。

DIV+CSS边框border知识教程篇

Html表格控制边框：

border="1" bordercolor="#000000"

说明：控制表格边框宽度为1px，css颜色为黑色，默认为实线样式边框。

border-left 设置左边框，一般单独设置左边框样式使用

border-right 设置右边框，一般单独设置右边框样式使用

border-top 设置上边框，一般单独设置上边框样式使用

border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

四边相同边框border简写

#divcss5{border:1px solid #00F}

设置了divcss5对象盒子1px像素蓝色实线边框

边框三个样式

通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。

边框颜色：border-color:#000

边框厚度（宽度）：border-width:1px

使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。

border边框样式：border-style:solid

none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。IE不支持

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

solid : 　实线边框（常用）

double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

groove : 　根据border-color的值画3D凹槽

ridge : 　根据border-color的值画菱形边框

inset : 　根据border-color的值画3D凹边

outset : 　根据border-color的值画3D凸边

CSS单独设置左边框、右边框、上边框、下边框   -   TOP

以缩写方式写上、下、左、右边框单独CSS样式设置方法

1、1px黑色虚线上边框

border-top:1px dashed #000

2、1px黑色实线下边框

border-bottom:1px solid #000

3、1px黑色虚线左边框

border-left:1px dashed #000

4、1px黑色实线右边框

border-right:1px solid #000

常用推荐边框样式

我们通常使用主流浏览器兼容边框样式有：

实线边框：solid

Border:1px solid #000 设置对象1px（像素）宽厚的黑色实线边框。

虚线边框：dashed

Border:1px dashed #000 设置对象1px（像素）宽厚的黑色虚线边框。

css border边框用处

设置对象边框样式，设置单独上边框、下边框、左边框、右边框样式，实现美化美观。边框起到分割、规划布局作用。

描述：为了观察案例效果我们设置一个css宽度为200px，css高度1px,红色实线边框的DIV盒子

CSS代码：

#divcss5{height:100px;width:200px;border:1px solid #F00}

HTML代码对应片段：

Nous utilisons DIV CSS pour définir le style de bordure. Généralement, nous utilisons l'abréviation expression pour définir le style de bordure de l'objet, ce qui enregistre le code et simplifie la fonction de code. Qu'il s'agisse de définir une bordure unique ou une bordure à quatre côtés, nous essayons d'abréger le code de bordure CSS, qui est l'abréviation de CSS border optimisation. Les codes d'attribut couramment utilisés pour définir les styles CSS sur les objets sont : border:1px solid #000;.

Trois côtés ont des bords mais un côté n'a aucune compétence de réglage

Code CSS : border:1px solid #000; border-top:none;

Assurez-vous de faire attention. to border : L'ordre de 1px solid #000; et border-top:none ne peut pas être échangé. Étant donné que la lecture CSS a pour principe de lire de haut en bas et de gauche à droite, cela n'a aucun sens de définir d'abord tout le style de bordure, puis de déclarer la bordure supérieure sur "aucun", c'est-à-dire pour obtenir le style requis par ceci exemple. Cela élimine le besoin de définir séparément les paramètres inférieur, gauche et droit, économisant ainsi une certaine quantité de code. Tant que vous suivez la logique normale du code, vous serez en mesure de maîtriser les frontières avec compétence.

Lecture connexe :

Comment convertir du HTML en fichier txt

Comment convertir un tableau et td Définir l'arrière-plan pour réaliser la bordure du tableau

Comment définir habilement la bordure du tableau pour le tableau et td

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!