30-CSS-07-CSS(CSS样式的结合应用)-CSDN博客

本文链接：https://blog.csdn.net/wy_0928/article/details/47616535

【通过CSS设置边框】方便，代码如下

<head>
	<style type="text/css">
	ul{
		list-style-type:circle;/*将列表前用空心圆编号*/
		/*list-style-image:url(1.bmp);	将列表前的编号位置用图1.bmp表示*/
	}


	table{
		border-bottom:#0C0 double 3px;	/*表格底边框设置为绿色 双下划线 线条粗细3*/
		border-left:#F00 solid 3px;	/*表格做边框设置为红色 实线 线条粗细3*/
		border-right:#FF0 dashed 3px;	/*表格右边框设置为黄色 虚线 线条粗细3*/
		border-top:#0C0 groove 3px;	/*表格顶边框设置为绿色 groove线 线条粗细3*/
		width:500px;	/*设置表格宽度*/
	}


	table td{	/*关联选择器，设置单元格样式*/
		border:#0CF dotted 1px;	/*单元格边框设置为绿色 双虚线 线条粗细1*/
		padding:20px;	/*单元格内边距设置为20，相当于原先在<table cellpadding="">中的cellpadding*/
		}


	div{
		border:#F90 dashed 2px;	/*div区域边框线条设置为橙色 虚线 线条粗细2*/
		height:200px;	/*div区域高设置为200*/
		width:200px;	/*div区域宽设置为200*/
	}
	</style>
</head>


<body>
	<div>div区域</div>
	
	<hr />
	<table>
		<tr>
			<td>单元格一</td>
			<td>单元格一</td>
		</tr>
		<tr>
			<td>单元格一</td>
			<td>单元格一</td>
		</tr>
	</table>
	
	<hr />
	<ul>
		<li>无序项目列表</li>
		<li>无序项目列表</li>
		<li>无序项目列表</li>
		<li>无序项目列表</li>
	</ul>
</body>

============================================================================================================
设置input区域边框，代码如下：

<head>
	<style type="text/css">
		input{
			border:none;	/*将input区域边框去除*/
			border-bottom:#000 1px solid;	/*设置input区域底边框线条为黑色 粗细1 实线*/
		}
	</style>
</head>


<body>
	姓名:<input type="text" />成绩:<input type="text" />
</body>