天天看点
返回

CSS3 圆角和阴影效果

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>index</title>
		<meta name="description" content="">
		<meta name="author" content="boonya">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" target="_blank" rel="external nofollow" >
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" target="_blank" rel="external nofollow" >
		<style>
		    div{
		    	color: #0A0F5A;
		    	size: 10px;
		    	font-family: '楷体';
		    	margin:20px;
		    	text-align:center;
		  
		    }
			#header{
				border:2px solid #a1a1a1;
				padding:10px 40px; 
				background:#dddddd;
				width:400px;
				height:100px;
				border-radius:25px;
			}
			#center{
				width: 400px;
				height: 100px;
				background: #1FCEAA;
				box-shadow:30px 30px 10px #5A310A;
			}
		</style>
	</head>

	<body>
		<div id="header">
			border-radius属性允许您向元素添加圆角!
		</div>
		<div id="center">
			box-shadow属性阴影
		</div>
	</body>
</html>

效果图：

CSS3 圆角和阴影效果
css3 前端 圆角 阴影
上一篇: 字体的阴影效果
下一篇: css3文字阴影效果

继续阅读