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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2019-03-10 美人尖
菜鸟大斌



完成
<html>
  <head></head>
		<style>
          div{
            width:0px;
			border-left:solid white 200px;
            border-top:solid red 200px;
            border-right:solid white 200px;
          }
		</style>
<body>
	<div></div>	
</body>
</html>

							





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





2019-03-10 斑马线作业
菜鸟大斌



斑马线
<html>
	<head>	
		<style>
			table{border-collapse:collapse;width:100%;height:100%;text-align:center;
				}
          .od{background-color:#f8f8f8;}
          #tr1{ border-bottom:solid 2px lightgray;}
          #tr2{border-bottom:solid 1px lightgray}
          #tr3{border-bottom:solid 1px lightgray}
          #tr4{border-bottom:solid 1px lightgray}
		</style>
	</head>				
		
		<body>
		<!--练习-表格斑马线-->
		<table>
			<tr id = "tr0">
				<td>id</td>
				<td>名称</td>
				<td>血量</td>
				<td>伤害</td>
			</tr>
			<tr id = "tr1" class = "od">
				<td>1</td>
				<td>gareen</td>
				<td>340</td>
				<td>58</td>
			</tr>
			<tr id = "tr2">
				<td>2</td>
				<td>teemo</td>
				<td>320</td>
				<td>76</td>
			</tr>
			<tr  id = "tr3" class = "od">
				<td>3</td>
				<td>annie</td>
				<td>380</td>
				<td>38</td>
			</tr>
			<tr id = "tr4">
				<td>4</td>
				<td>deadbrother</td>
				<td>400</td>
				<td>90</td>
			</tr>
		</table>



</body>
</html>

							





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





2019-02-12 交作业——表格斑马线
2019-01-22 作业:美人尖
2019-01-17 交作业-断线下划线
2019-01-17 交作业-美人尖
2019-01-17 交作业-表格斑马线ヾ(๑╹◡╹)ノ"
2019-01-10 作业:表格斑马线
2019-01-10 作业:断线下划线
2019-01-10 作业:表格斑马线
2019-01-10 作业:美人尖
2019-01-10 美人尖
2019-01-10 作业:表格斑马线
2019-01-10 作业:表格斑马线
2018-12-24 作业美人尖
2018-12-17 交作业 断线下划线
2018-12-17 交作业 断线下划线
2018-12-17 交作业 美人尖
2018-12-17 交作业斑马线
2018-11-21 交作业:断线下划线
2018-11-21 利用margin-right属性怎么实现不了断下划线?
2018-11-14 交作业——断线下划线
2018-11-01 间隔线作业
2018-11-01 交作业美人尖
2018-11-01 斑马线作业
2018-09-19 交作业 斑马线练习
2018-09-19 交作业
2018-09-14 交作业
2018-09-07 交作业
2018-09-02 交作业 美人尖
2018-08-23 下三角不需要底部边框吧?
2018-07-07 关于断线下划线的间距问题
2018-07-06 为什么我的代码总是比别人短,但是效果一样的啊
2018-07-06 下三角,自己的答案
2018-06-29 供参考
2018-04-21 死歌是deadbrother?我书读得少,别骗我......
2018-04-11 只有一行 设置下边框
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群交流: 984886441
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图