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 : 答案-断线下划线   

属性: 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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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 :

只有一个方向有边框

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

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 :

有交界的边都有边框

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

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

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

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

练习-表格斑马线

edit 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 :

答案-表格斑马线

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<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 :

练习-美人尖

edit 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 :

答案-美人尖

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
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 :

练习-断线下划线

edit 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 :

答案-断线下划线

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-06-22 原理询问
a1032077316

美人尖那个宽度和高度为什么都是0,想不明白




1 个答案

3218974322
答案时间:2020-06-25
div如果规定了宽高他的边框就是四个梯形,如果宽高都为0梯形的短底就会无限压缩就是0了,所以上边框就是一个倒三角形



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-06-22 美人尖
2539044088

div{ margin: 100px 100px; background-color: darkgrey; width: 0px;height: 0px; border-top: 20px solid red; border-left: 20px solid #ffff; border-right: 20px solid #ffff; }




1 个答案

Rdm
答案时间:2020-07-10
我一开始也不明白是怎么实现的,我就把原本白色的边框都换成了其他的颜色,然后就看到了四个不同颜色的三角形组成了一个矩形。上面有个知识点是边框交界处是斜线,因为div宽和高都为0所以边框就贴合成了一个满填充的矩形。最终的倒三角形是将另外三个边框都设置成了白色。



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-05-28 第二个为什么用td会奇奇怪怪的?
2020-04-29 斑马线
2020-04-26 斑马线


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 40 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-边框 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 745032160
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图