css中边框代码 |css让字体变大响应式

.box {
border: 1px solid black;
}

上面的代码表示给.box这个元素加上一条1像素粗的黑色边框。

还可以使用border-style属性来定义边框的样式：

.box {
border-style: dotted;
}

上面的代码表示给.box这个元素加上一条点状边框。

当然，大家也可以将边框属性分开来写：

.box {
border-width: 1px;
border-style: solid;
border-color: black;
}

上面的代码与第一个例子的效果相同。其中border-width表示边框的粗细，border-style表示边框的样式，border-color表示边框的颜色。

如果大家只想给边框指定某几个方向，可以使用下面这个代码：

.box {
border-top: 1px solid black;
border-right: 2px dotted red;
border-bottom: 3px dashed blue;
border-left: 4px double green;
}

上面的代码表示给.box这个元素的上边框添加一条1像素粗的黑色边框，右边框添加一条2像素粗的红色点状边框，下边框添加一条3像素粗的蓝色虚线边框，左边框添加一条4像素粗的绿色双线边框。

当然，大家也可以使用border-top-style、border-right-width等分开写：

.box {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
border-right-width: 2px;
border-right-style: dotted;
border-right-color: red;
border-bottom-width: 3px;
border-bottom-style: dashed;
border-bottom-color: blue;
border-left-width: 4px;
border-left-style: double;
border-left-color: green;
}

以上就是CSS中边框的代码介绍。