how2j.cn


工具版本兼容问题
元素的边框

关键字 简介 示例代码
border-style
边框风格
示例代码
border-color
边框颜色
示例代码
border-width
边框宽度
示例代码
border
都放在一起
示例代码
border-top
只有一个方向有边框
示例代码
border-top,border-left
有交界的边都有边框
示例代码
div
span
块级元素和内联元素的边框区别
示例代码
练习-表格斑马线
示例代码
答案-表格斑马线
示例代码
练习-美人尖
示例代码
答案-美人尖
示例代码
练习-断线下划线
示例代码
答案-断线下划线
示例代码
示例 1 : 边框风格   
示例 2 : 边框颜色   
示例 3 : 边框宽度   
示例 4 : 都放在一起   
示例 5 : 只有一个方向有边框   
示例 6 : 有交界的边都有边框   
示例 7 : 块级元素和内联元素的边框区别   
示例 8 : 练习-表格斑马线   
示例 9 : 答案-表格斑马线   
示例 10 : 练习-美人尖   
示例 11 : 答案-美人尖   
示例 12 : 练习-断线下划线   
示例 13 : 答案-断线下划线   

示例 1 :

边框风格

属性: 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/>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

边框颜色

属性: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/>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

边框宽度

属性: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/>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

都放在一起

属性: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/>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

只有一个方向有边框

通过制定位置,可以只给一个方向设置边框风格,颜色和宽度

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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

有交界的边都有边框

比如上和左就是有交界的,而上和下就没有交界

当有交界的边同时出现边框的时候,就会以倾斜的形式表现交界线。
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

块级元素和内联元素的边框区别

可以看到,块级元素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/>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 8 :

练习-表格斑马线

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 9 :

答案-表格斑马线

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 10 :

练习-美人尖

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
借助边框,实现美人尖的效果。 其实就是倒三角
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 11 :

答案-美人尖

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
dfs
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 12 :

练习-断线下划线

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 13 :

答案-断线下划线

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-04-21 死歌是deadbrother?我书读得少,别骗我......
ddhjx_zq
= =








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-04-11 只有一行 设置下边框
慕伊



不是很理解啥叫做断线下划线 所以按照自己的想法做了一个 结果和截图一样
<html>
  <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
  
  <body>
    <style>
td{ width:100px; text-align:center; border-bottom:#b2d1ff solid 3px; }
</style>
    <table>
      <tr>
        <td>商品</td>
        <td>数量</td>
        <td>价格</td>
        <td>小计</td>
     </tr>
    </table>
  </body>

</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-04-02 断线下划线
2018-03-16 斑马线,选择器也有优先级对不对,所以最后显示的是tr.head的效果而不是tr的
2018-01-28 内联元素 i 和啥有关?
2018-01-19 tr.odd和tr.head选择器放在tr后面就不起效果了
2018-01-02 tr中even的class是从哪里来的?
2017-12-20 美人尖如何居中
2017-09-20 关于倒三角的尖尖角问题
2017-07-24 #fff与#ffffff的区别
2017-07-15 断线下划线
2017-07-12 断线下划线
2017-05-22 表格斑马线为什么的练习必须设置border-collapse
2017-05-18 关于tr和td
2017-04-23 属性值放在一起,为什么不能正常显示“美人尖”




提问之前请登陆
关于 前端基础-CSS-边框 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图