【海码学院】web前端基础入门CSS之表格样式、轮廓样式和边框阴影课堂学习笔记

最新推荐文章于 2023-07-23 18:44:37 发布

励志的程序员

最新推荐文章于 2023-07-23 18:44:37 发布

阅读量174

点赞数

分类专栏： HTML CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/weixin_45282338/article/details/95228933

版权

HTML 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

一、表格相关样式

1、border-collapse

设置表格的边框是否被合并为一个单一的边框

border-collapse ：separate；默认值。边框会被分开

border-collapse ：collapse；如果可能，边框会合并为一个单一的边框

<style>
	.table1{
		border-collapse: collapse;
	}
	.table2{
		border-collapse: separate;
	}
</style>


<body>
	<table class="table1">
		<tr>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
		</tr>
	</table>
	<hr />
	<table class="table2">
		<tr>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
		</tr>
	</table>
</body>

2、border-spacing

设置相邻单元格的边框间的距离（仅用于“边框分离”模式）

border-spacing：值值；

注意：

值可以使用 px、cm 等单位。不允许使用负值。

如果定义一个参数，那么定义的是水平和垂直间距。

如果定义两个参数，那么第一个设置水平间距，而第二个设置垂直间距。

<style>		
	table{
		border-collapse: separate;
		border-spacing: 10px 20px;
	}
</style>


<body>
	<table>
		<tr>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
		</tr>
	</table>
</body>

3、empty-cells

设置是否显示表格中的空单元格（仅用于“分离边框”模式）

empty-cells：hide；不在空单元格周围绘制边框。

empty-cells：show；在空单元格周围绘制边框。默认。

<style>
	table{
		border-collapse: separate;
		border-spacing: 10px 20px;
		empty-cells: hide;
	}
</style>


<body>
	<table>
		<tr>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
		</tr>
		<tr>
			<td></td>
		</tr>
	</table>
</body>

4、vertical-align

单元格内容垂直方向

vertical-align：top；顶端对齐

vertical-align：middle；居中

vertical-align：bottom：底部对齐

<style>
	table{
		vertical-align: middle;
	}
</style>


<body>
	<table>
		<tr>
			<td>111</td>
		</tr>
		<tr>
			<td>111</td>
		</tr>
	</table>
</body>

二、轮廓相关样式

1、outline：设置所有的轮廓属性

outline：color style width；

2、outline-color ：设置轮廓的颜色

3、outline-style：设置轮廓的样式

4、outline-width：设置轮廓的宽度

<style>
	div{
		outline: red solid 2px;
	}
	p{
		outline: #2000FF dashed 5px;
	}
</style>

	
<body>
	<div>111</div>
	<p>222</p>
</body>

注意：outline和border应用差不多！

三、边框阴影 box-shadow

box-shadow : 横向偏移纵向偏移阴影模糊距离阴影大小颜色内部/外部；

注意：

横向偏移和纵向偏移是必须要写的，允许负值；

后面4个是可选；

<style>
	div{
		width: 300px;
		height: 200px;
		background-color: orange;
		box-shadow: 10px 15px 10px 10px red inset;
	}
</style>


<body>
	<div>云想衣裳花想容</div>	
</body>

to be continued...

励志的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【海码学院】web前端基础入门CSS之表格样式、轮廓样式和边框阴影课堂学习笔记

一、表格相关样式1、border-collapse设置表格的边框是否被合并为一个单一的边框border-collapse ：separate；默认值。边框会被分开border-collapse ：collapse；如果可能，边框会合并为一个单一的边框<style> .table1{ border-collapse: collapse; } .tab...
复制链接

扫一扫