CSS系列教材（十一）- 基础

CSS系列教材（十二）- 基础 - 内边距，以及当设置的数值小于4个的时候的处理

工具版本兼容问题

元素的边框

纠

关键字	简介	示例代码
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 :

边框风格

edit 顶折

纠问

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

边框颜色

edit 顶折

纠问

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

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

边框宽度

edit 顶折

纠问

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

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

都放在一起

edit 顶折

纠问

属性：border
值：颜色风格宽度

运行效果

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

源代码

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/>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 8 :

练习-表格斑马线

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

代码行数较多，请点击查看

<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个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

借助边框，实现美人尖的效果。　其实就是倒三角

代码行数较多，请点击查看

<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个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

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 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

代码行数较多，请点击查看

<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个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

CSS系列教材（十）- 基础 - 设置字体样式

CSS系列教材（十二）- 基础 - 内边距，以及当设置的数值小于4个的时候的处理

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

问答区域

2024-07-23 倒三角

虚心求学	关于前端部分-CSS-边框的提问问题截图代码异常利用 CSS 边框样式调整的先后顺序，七行代码即可实现。 <style> table{ border : 20px dashed #fff; border-top-color : #f00; } </style> <table></table>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2024-07-22 断线下划线

虚心求学

关于前端部分-CSS-边框的提问

利用 CSS 类选择器和元素选择器的优先级不同，调整左右、上下边框颜色即可。

<style>
table{
  width : 100%;
  height: 200px;
  table-layout:automatic;
  text-align : center;
  border-collapse : collapse;
  border-top: 3px solid #fff;
  border-bottom: 3px solid deepskyblue;
  }
 </style>

<style>
td{
  border-left:6px solid #fff;
  border-right:6px solid #fff;
  border-bottom:2px solid skyblue;
  }
</style>
<style>
</style>
<table border = "1">
  <tr class = "r1">
    						<td>id</td>	<td>名称</td>					<td>血量</td>		<td>伤害</td> 
  </tr>
<tr class = "r2">	<td>1</td>	<td>gareen</td>				<td>520</td>		<td>12</td>
  </tr>
<tr class = "r3">	<td>2</td>	<td>teemo</td>				<td>521</td>		<td>34</td>
  </tr>
<tr class = "r4">	<td>3</td>	<td>annie</td>				<td>013</td>		<td>56</td>
  </tr>
<tr class = "r5">	<td>4</td>	<td>deadborther</td>	<td>014</td>		<td>78</td>
  </tr>
 </table>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2024-07-22 斑马线

虚心求学

关于前端部分-CSS-边框的提问

根据 CSS 设计表格边框、偶数行背景颜色

<style>
table{
  width : 100%;
  height: 200px;
  table-layout:automatic;
  text-align : center;
  border-collapse : collapse;
  border-top:0px #fff;
  border-left:0px #fff;
  border-right:0px #fff;
  background-color:#fafafa
  }
 </style>
<style>
table{
  width : 100%;
  table-layout:automatic;
  text-align : center;
  border-collapse : collapse;
  border-bottom:3px solid #bbb;
  }
 </style>
<style>
 tr{
   border-bottom : 1px solid #ccc;
  }
  </style>
<style>
 tr.r1{
   border-bottom : 3px solid #bbb;
  }
  </style>
<style>
.r2{
      background : #eee;
}
</style>
<style>
.r4{
      background : #eee;
}
</style>
<style>
td{
  width : 25%;
  }
 </style>
<table>
  <tr class = "r1">
    						<td>id</td>	<td>名称</td>					<td>血量</td>		<td>伤害</td> 
  </tr>
<tr class = "r2">	<td>1</td>	<td>gareen</td>				<td>520</td>		<td>12</td>
  </tr>
<tr class = "r3">	<td>2</td>	<td>teemo</td>				<td>521</td>		<td>34</td>
  </tr>
<tr class = "r4">	<td>3</td>	<td>annie</td>				<td>013</td>		<td>56</td>
  </tr>
<tr class = "r5">	<td>4</td>	<td>deadborther</td>	<td>014</td>		<td>78</td>
  </tr>
 </table>

1 个答案

虚心求学
答案时间：2024-07-26

简化斑马线代码

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-07-02 练习答案

AnomyIris

关于前端部分-CSS-边框的提问

练习答案

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice_css</title>
</head>
<style>
	table.t{
		border-collapse:collapse;
		line-height:2em;
	}
	tr{
		border-bottom:solid gray 1px;
	}
	tr:nth-child(2){
		background-color:#CFCFCF 
	}
	tr:nth-child(4){
		background-color:#CFCFCF 
	}
	tr:nth-child(even){
		border-bottom-width:2px; 
	}
</style>

<body>
	<table class="t" >
		<tr align="center">
			<td width="200px">id</td>
			<td width="200px">名称</td>
			<td width="200px">血量</td>
		</tr>
		<tr align="center">
			<td>1</td>
			<td>green</td>
			<td>340</td>
		</tr>
		<tr align="center">
			<td>2</td>
			<td>teemo</td>
			<td>320</td>
		</tr>
		<tr align="center">
			<td>3</td>
			<td>annie</td>
			<td>380</td>
		</tr>
		<tr align="center">
			<td>4</td>
			<td>deadbrother</td>
			<td>400</td>
		</tr>
	</table>
	<br><br><br>

<style>
	div.triangle{
		width: 0px;
		height: 0px;
		border-top:50px solid red;
		border-left:50px solid white;
		border-right:50px solid white;
	}
</style>
	<div class="triangle"></div>
	<br><br>
	
<style>
	td.u{
		border-bottom:solid 2px #2C92CA;
	}
</style>
	<table width="400px">
		<tr align="center">
			<td class="u">商品</td>
			<td class="u">数量</td>
			<td class="u">价格</td>
			<td class="u">小计</td>
		</tr>
	</table>
</body>
</html>

3 个答案

自学
答案时间：2024-06-24

练习-表格斑马线

代码超过 5行，点击查看

CharlieLong
答案时间：2023-10-24

3个练习的答案：

代码超过 5行，点击查看

LUO萝北
答案时间：2023-05-29

练习-表格斑马线

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-04-30 用选择器的时候大括号前面的 table tr.rowborder td...是什么意思？

huyou9827

关于前端部分-CSS-边框 -答案-断线下划线的提问

请教一些，答案中用选择器的时候，table tr.rowborder td{...是什么意思，直接用tr.rowborder效果是一样的

<style>
		table{
			width:100%;
		}
	    td{
			text-align: center;
		}
		tr.rb{
			background-color: lightskyblue;
			border-right: white solid 2px;
			height:3px;
		}
	</style>	
	<table>
		<tr>
			<td>商品</td>
			<td>价格</td>
			<td>数量</td>
			<td>小记</td>
		</tr>
		<tr class="rb">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>

1 个答案

M_GX
答案时间：2022-07-16

table{width:100%;}表示表格宽度横跨浏览器页面，不管是不是最大化都会占用整个页面

td{text-align: center;}表示仅设置表格属性：字符居中

tr.rb{background-color: lightskyblue;border-right: white solid 2px;height:3px;}表示表格中的采用这个class的行会执行属性设置：背景色：天蓝；左边框：白色，2px，实线；这一行的高度3px

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

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

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-CSS-边框的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

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

上传截图