文本框变色，div渐变+圆角边框+阴影，table表格填充颜色+边框变色+居中

最新推荐文章于 2021-11-26 15:11:23 发布

yin_chenglong

最新推荐文章于 2021-11-26 15:11:23 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/yin_chenglong/article/details/79886285

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
	.class1{
	border: 1px solid red;
	text-align: right;
	border-bottom-color: blue;
	border-top-color: deeppink;

	}
	p{
	text-align: center;
	text-decoration:underline ;
	font-weight: 800;

	font-style: oblique;
	}
	.div1{
	width: 300px;
	height: 50px;
	background-color: red;
	border: 3px;
	background-repeat: no-repeat;


	padding: 10px 10px 10px 10px;
	border-radius: 50px;
	box-shadow: 12px 12px 12px yellow;
	background-image: -webkit-linear-gradient(bottom,blue,yellow,green,pink);

	}
	.div2{
	widows: 300px;
	height: 20px;
	background-color: brown;
	position: relative;
	z-index: 100;
	background-image: url(img/mm.png);
	background-repeat: no-repeat;
	background-position: center;

	}
	</style>
	</head>
	<body>
	<center>我是居中标签</center>

	<p>我是p标签</p>
	<input class="class1" type="text" name="username"/><br /><br />
	<table border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px">
	<tr style="background-color: gray;"><td>id</td><td>名字</td><td>密码</td></tr>
	<tr><td>1</td><td>张三</td><td>123456</td></tr>
	<tr><td>2</td><td>李四</td><td>888888</td></tr>
	</table>
	<br /><br />
	<div class="div1">
	我是div11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
	</div>
	<div class="div2">
	我是div22222222
	</div>

	</body>
	</html>

关注