border
定义:border
简写属性在一个声明设置所有的边框属性。
关于边框属性的认识我么需要知道的有:
border-style
,指定要显示什么样的边界border-width
,指定边框的宽度border-color
,设置边框颜色
border-style
关于border-style的属性值可以有:默认值 none(无边框),dotted(点线边框),dashed(虚线边框),solid(实线边框)等等。
<style>
.bs{
border-style: solid;
}
.bs2{
border-style: dashed;
}
.bs3{
border-style: dotted;
}
.bs4{
border-style: double;
}
</style>
<p class="bs">1px 实线 绿色的边框</p><br>
<p class="bs2">2px 虚线 红色的边框</p><br>
<p class="bs3">3px 点线 蓝色的边框</p><br>
<p class="bs4">定义两个边框</p>
border-width
为边框指定宽度长度值。比如给上面的第一个段落设置宽度为5px:
.bs{
border-width:5px;
}
border-color
设置边框的颜色值。比如给第二个段落添加一个绿色:
.bs2{
border-color:green;
}
对于上面三者的写法,我们可以使用一个简写属性将三者结合一起:border。
语法:border:border-width border-style border-color;
,同样是上面的例子,我们可以简化修改:
<style>
.bs1{
border:1px solid green;
}
.bs2{
border:2px dashed red;
}
.bs3{
border:3px sdotted blue;
}
.bs4{
border-style:double;
}
</style>
<p class="bs1">宽度为1px的实线绿色边框</p><br>
<p class="bs2">宽度为2px的虚线红色边框</p><br>
<p class="bs3">宽度为3px的点线蓝色边框</p><br>
<p class="bs4">定义两个边框</p>
动手小练习
- 随意输入三段文字,分别给文字段落定义不同类型的边框(虚线、实线和点线)
- 在第一题的基础上,给边框加上适当的样式(包括颜色、粗细或者是字体大小等)