html5input输入框设置无边框_border 边框

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>

动手小练习

1. 随意输入三段文字，分别给文字段落定义不同类型的边框（虚线、实线和点线）
2. 在第一题的基础上，给边框加上适当的样式（包括颜色、粗细或者是字体大小等）