一、基本边框样式
边框是CSS样式中经常使用的属性之一，用来为元素周围添加样式，丰富页面效果。border属性常用来定义元素的边框样式，其基本用法为：
.selector {
border: [边框宽度] [边框样式] [边框颜色];
}
例如下面代码展示了一种基本的边框样式：
.container {
border: 1px solid #000;
padding: 20px;
text-align: center;
background-color: #fff;
}
该代码定义了一个容器，设置了1px宽度，实线样式，黑色颜色的边框，同时还为容器添加了20px的内边距、居中对齐和白色背景。
二、不同边框样式
除了基本的实线边框，border属性还能设置多种不同的边框样式。下面是一些常用的边框样式：
- solid：实线边框
- dashed：虚线边框
- dotted：点状边框
- double：双线边框
- groove：凹槽边框
- ridge：垄状边框
- inset：内嵌边框
- outset：外嵌边框
例如下面代码展示了几种不同的边框样式：
.container {
padding: 20px;
text-align: center;
background-color: #fff;
}
.border1 {
border: 1px solid #000;
}
.border2 {
border: 1px dashed #f00;
}
.border3 {
border: 1px dotted #0f0;
}
.border4 {
border: 1px groove #00f;
}
.border5 {
border: 1px ridge #f0f;
}
.border6 {
border: 1px double #ff0;
}
.border7 {
border: 1px outset #0ff;
}
.border8 {
border: 1px inset #888;
}
分别定义了8个容器，设置了不同的边框样式，效果如下：
实线边框
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/309607.html
微信扫一扫 
支付宝扫一扫 