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-01-15 交作业
yuyuyuyu128




留下足迹
加载中
	<table>
		<tr class="wrapper1" align="center">
			<td>id</td>
			<td>名称</td>
			<td>血量</td>
			<td>伤害</td>
		</tr>
		<tr class="wrapper2" align="center">
			<td width="80px">1</td>
			<td width="200px">gareen</td>
			<td width="80px">340</td>
			<td width="80px">58</td>
		</tr>
		<tr class="wrapper3" align="center">
			<td>2</td>
			<td>teemo</td>
			<td>320</td>
			<td>76</td>
		</tr>
		<tr class="wrapper4" align="center">
			<td>3</td>
			<td>annie</td>
			<td>380</td>
			<td>38</td>
		</tr>
		<tr class="wrapper5" align="center">
			<td>4</td>
			<td>deadbrother</td>
			<td>400</td>
			<td>90</td>
		</tr>
	</table>

*{
	padding: 0;
	margin: 0;
	border-collapse: collapse;
}
.wrapper1{
	border-bottom-width: 2px;
	border-bottom-color: red;
	border-style: solid;
	border-top:transparent;
	border-right:transparent;
	border-left:transparent;
}
.wrapper2{
	border-bottom-width: 2px;
	border-bottom-color: red;
	border-style: solid;
	background-color:#555;
	border-top:transparent;
	border-right:transparent;
	border-left:transparent;

}
.wrapper3{
	border-top:transparent;
	border-right:transparent;
	border-left:transparent;
	border-bottom-width: 2px;
	border-bottom-color: red;
	border-style: solid;
}
.wrapper4{
	border-bottom-width: 2px;
	border-bottom-color: red;
	border-style: solid;
	background-color:#555;
	border-top:transparent;
	border-right:transparent;
	border-left:transparent;
}
.wrapper5{
	border-top:transparent;
	border-right:transparent;
	border-left:transparent;
	border-bottom-width: 2px;
	border-bottom-color: red;
	border-style: solid;
}

							





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





2020-01-10 表格斑马线交作业
Little-bee




交作业
加载中
<style>
  table{
    width: 90%;
    border-collapse: collapse;
    font-family: 微软雅黑;
  }
  td{
    width: 25%;
    text-align: center;
  }
  .one{
    background-color: #d1e3d8;

    border-top-color: #555555;
    border-top-style: solid;
    border-top-width: 2px;

    border-bottom-color: #555555;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 35px;
  }
  .two{

    border-top-color: #555555;
    border-top-style: solid;
    border-top-width: 1px;

    border-bottom-color: #555555;
    border-bottom-style: solid;
    border-bottom-width: 1px;

    background-color: #d1e3d8;
    height: 35px;
  }
  .three{
    border-bottom-color: #555555;
    border-bottom-style: solid;
    border-bottom-width: 1px;

    height: 35px;
  }
  .head{
    height: 35px;
  }
</style>
<table>
  <tr>
    <td class="head">id</td>
    <td>名称</td>
    <td>血量</td>
    <td>伤害</td>
  </tr>
  <tr class="one">
    <td>1</td>
    <td>gareen</td>
    <td>340</td>
    <td>58</td>
  </tr>
  <tr>
    <td class="head">2</td>
    <td>teemo</td>
    <td>320</td>
    <td>76</td>
  </tr>
  <tr  class="two">
    <td>3</td>
    <td>annie</td>
    <td>380</td>
    <td>38</td>
  </tr>
  <tr class="three">
    <td>4</td>
    <td>deadbrother</td>
    <td>400</td>
    <td>90</td>
  </tr>
</table>

							





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





2020-01-08 答案
2020-01-07 小企业的前端Time-CSS 边框作业
2020-01-07 美人尖,断线下划线作业
2020-01-07 斑马线作业
2019-11-05 用border-spacing解决断线问题
2019-10-19 美人尖作业提交
2019-10-08 美人尖、斑马线、表格练习作业
2019-10-02 斑马线作业
2019-09-30 8行代码的断线下划线
2019-09-29 斑马线作业
2019-09-29 倒三角作业,误打误撞
2019-09-22 交作业 斑马线、美人尖和断线下划线
2019-08-28 美人尖
2019-08-26 断线下划线----精简代码实现
2019-08-26 表格斑马线----详解
2019-08-26 表格斑马线----详解
2019-08-26 美人尖---精简代码
2019-08-22 表格斑马线、美人尖
2019-08-15 菜鸟求助
2019-08-13 最后一题答案参考-。-
2019-08-02 交作业 断线下划线
2019-07-17 ZZ交作业 CSS边框部分
2019-07-10 表格斑马线
2019-07-10 表格斑马线
2019-07-10 断线下划线
2019-07-10 表格斑马线
2019-06-17 美人尖
2019-06-06 下三角
2019-06-06 作业
2019-05-24 交作业 美人尖
2019-05-22 交作业 美人尖
2019-04-26 断线下划线 作业
2019-04-26 美人尖
2019-04-26 作业,表格斑马线
2019-03-10 美人尖
2019-03-10 斑马线作业
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 属性值放在一起,为什么不能正常显示“美人尖”