一、添加边框
在CSS中，设置边框的属性为border。边框的设置可以包括宽度、样式和颜色。下面是一个添加红色边框的例子：
.box {
border: 1px solid red;
}
上面的代码表示在class为box的元素周围添加宽度为1像素、样式为实线、颜色为红色的边框。
另外，还可以分别设置边框的上下左右，通过分别设置border-top、border-bottom、border-left和border-right来实现。例如：
.box {
border-top: 1px solid red;
border-left: 2px dotted blue;
border-bottom: 3px double green;
border-right: 4px dashed yellow;
}
上面的代码表示在class为box的元素的上面添加宽度为1像素、样式为实线、颜色为红色的边框，左边添加宽度为2像素、样式为点线、颜色为蓝色的边框，下面添加宽度为3像素、样式为双线、颜色为绿色的边框，右边添加宽度为4像素、样式为虚线、颜色为黄色的边框。
二、设置边框弧度
CSS3提供了border-radius属性来设置元素的边框弧度，即让元素拥有圆角。例如：
.box {
border: 1px solid black;
border-radius: 10px;
}
上面的代码表示在class为box的元素周围添加宽度为1像素、样式为实线、颜色为黑色的边框，并且让元素的四个角都呈现10像素的圆角。
border-radius还可以设置不同的弧度值来实现不同的效果。例如：
.box {
border: 1px solid black;
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 15px;
}
上面的代码表示在class为box的元素周围添加宽度为1像素、样式为实线、颜色为黑色的边框，并且让元素的左上角呈现20像素的圆角，右上角呈现10像素的圆角，左下角呈现5像素的圆角，右下角呈现15像素的圆角。
三、增加间距
在CSS中，可以使用padding和margin来增加元素内部和外部的间距。
padding属性用于设置元素内部的间距，即元素内容和边框之间的距离。例如：
.box {
border: 1px solid black;
padding: 10px;
}
上面的代码表示在class为box的元素周围添加宽度为1像素、样式为实线、颜色为黑色的边框，并且在元素内部添加10像素的间距。
margin属性用于设置元素外部的间距，即元素和其它元素之间的距离。例如：
.box {
border: 1px solid black;
margin: 10px;
}
上面的代码表示在class为box的元素周围添加宽度为1像素、样式为实线、颜色为黑色的边框，并且让元素和其它元素之间保留10像素的间距。
和边框一样，padding和margin属性也可以分别设置上下左右的间距。例如：
.box {
border: 1px solid black;
padding: 10px 20px 15px 5px;
margin: 5px 10px;
}
上面的代码表示在class为box的元素周围添加宽度为1像素、样式为实线、颜色为黑色的边框，并且让元素的上面保留10像素的间距，右边保留20像素的间距，下面保留15像素的间距，左边保留5像素的间距，和其它元素之间保留上下5像素、左右10像素的间距。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/160033.html
微信扫一扫 
支付宝扫一扫 