点此查看 所有教程、项目、源码导航
本文目录
- 1. 前言
- 2. 边框的样式
- 3. 边框宽度
- 4. 边框颜色
- 5. 简写属性
- 6. 单独设定各边样式
- 7. 小结
1. 前言
边框是使用频率很高的样式,图片可以加边框,表格基本都是带边框的,所以边框的学习是很重要的。
本篇就来介绍下CSS边框的用法。
2. 边框的样式
可以通过border-style设置边框样式,常用的有solid实线、dotted点线、dashed虚线三种。
<p class="border-solid">
演示实线边框
</p>
<p class="border-dotted">
演示点线边框
</p>
<p class="border-dashed">
演示虚线边框
</p>
CSS代码:
.border-solid {
border-style: solid;
}
.border-dotted {
border-style: dotted;
}
.border-dashed {
border-style: dashed;
}
效果如下:
3. 边框宽度
可以通过border-width调整边框的宽度,单位一般使用px像素。
<p class="border-thick">
演示粗边框
</p>
<p class="border-thin">
演示细边框
</p>
CSS代码,当日具体的宽度,可以根据实际情况调整,我此处仅仅为了演示。
.border-thick {
border-style: solid;
border-width: 4px;
}
.border-thin {
border-style: solid;
border-width: 1px;
}
效果如下:
4. 边框颜色
可以使用bolder-color指定边框的颜色,HTML代码:
<p class="border-red">
演示红色边框
</p>
<p class="border-green">
演示绿色边框
</p>
CSS代码:
.border-red {
border-style: solid;
border-color: red;
}
.border-green {
border-style: solid;
border-color: green;
}
效果如下:
5. 简写属性
大家想必发现了,我们在设定边框样式时,一般都会同时设定边框样式、宽度、颜色,如果逐一定义,比较麻烦。
所以CSS还提供了简写属性:
<p class="border-simple">
使用简写属性
</p>
CSS代码:
/* 使用简写属性,边框样式为实线、宽度1px、颜色蓝色 */
.border-simple {
border: solid 1px blue;
}
效果如下:
一般情况下,边框都是使用简写属性来编写,因为这样写比较简单。
6. 单独设定各边样式
还支持单独设定上边框、下边框、左边框、右边框的样式:
<p class="border-each">
单独设定各边框样式
</p>
CSS代码:
.border-each {
border-top: solid 1px blue;
border-bottom: solid 1px green;
border-left: dashed 1px grey;
border-right: dashed 1px grey;
}
效果如下:
7. 小结
边框一般掌握简写方法就够了。
更多推荐
零基础CSS入门教程(13)–边框样式
发布评论