|
|
|
示例 2 : 边框颜色 示例 3 : 边框宽度 示例 4 : 都放在一起 示例 5 : 只有一个方向有边框 示例 6 : 有交界的边都有边框 示例 7 : 块级元素和内联元素的边框区别 示例 8 : 练习-表格斑马线 示例 9 : 答案-表格斑马线 示例 10 : 练习-美人尖 示例 11 : 答案-美人尖 示例 12 : 练习-断线下划线 示例 13 : 答案-断线下划线
属性： border-style
solid: 实线 dotted:点状 dashed:虚线 double:双线 <style>
.solid{
border-style:solid;
}
.dotted{
border-style:dotted;
}
.dashed{
border-style:dashed;
}
.double{
border-style:double;
}
</style>
<div> 默认无边框div </div>
<div class="solid"> 实线边框 </div><br/>
<div class="dotted"> 点状边框 </div> <br/>
<div class="dashed"> 虚线边框 </div> <br/>
<div class="double"> 双线边框 </div> <br/>
属性：border-color
值：red,#ff0000,rgb(255,0,0) <style>
.red{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色边框 </div><br/>
<style>
.red{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色边框 </div><br/>
属性：border-width
值：数字 <style>
.red{
border-style:solid;
border-color:red;
border-width:1px;
}
.default{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<div class="default"> 实线红色默认宽度边框 </div><br/>
<style>
.red{
border-style:solid;
border-color:red;
border-width:1px;
}
.default{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<div class="default"> 实线红色默认宽度边框 </div><br/>
属性：border
值：颜色 风格 宽度 <style>
.red{
border:1px dotted LightSkyBlue;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 点状天蓝色细边框 </div><br/>
<style>
.red{
border:1px dotted LightSkyBlue;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 点状天蓝色细边框 </div><br/>
通过制定位置，可以只给一个方向设置边框风格，颜色和宽度
border-top-style:solid; border-top-color:red; border-top-width: 50px; top,bottom,left,right 分别对应上下左右 <style>
div{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
background-color:lightgray;
}
</style>
<div>
只有上面有边框
</div>
<style>
div{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
background-color:lightgray;
}
</style>
<div>
只有上面有边框
</div>
比如上和左就是有交界的，而上和下就没有交界
当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。 <style>
div.lefttop{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
background-color:lightgray;
}
div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>
<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框
</div>
可以看到，块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等 而内联元素span的宽度由其内容的宽度决定 常见的内联元素有 a b strong i input 等 <style>
.red{
border:1px solid red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<span class="red"> 实线红色细边框 </span><br/>
<style>
.red{
border:1px solid red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<span class="red"> 实线红色细边框 </span><br/>
<style>
table{
border-collapse:collapse;
width:90%;
}
tr.odd{
background-color:#f8f8f8;
}
tr.head{
border-bottom-width: 2px;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<table>
<tr class="head">
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr class="odd">
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr class="even">
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr class="odd">
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr class="even">
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>
借助边框，实现美人尖的效果。 其实就是倒三角
<style>
div{
width:0px;
height:0px;
border-top-style:solid;
border-top-color:red;
border-top-width: 10px;
border-left-style:solid;
border-left-color:white;
border-left-width: 10px;
border-bottom-style:solid;
border-bottom-color:white;
border-bottom-width: 10px;
border-right-style:solid;
border-right-color:white;
border-right-width: 10px;
}
</style>
<div >
</div>
<style>
table{
width:100%;
}
table td{
text-align:center;
}
table tr.rowborder td{
background-color: #b2d1ff;
border-right: 2px solid #fff;
height: 3px;
}
</style>
<table>
<tr>
<td>商品</td>
<td>数量</td>
<td>价格</td>
<td>小记</td>
</tr>
<tr class="rowborder">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
Or
姿势不对,事倍功半!