CSS3边框

HTML5学习 admin 333浏览

CSS3边框:通过CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框-并且不需使用设计软件,比如PhotoShop

属性:border-radius,box-shadow,border-image

浏览器支持:Internet, Explorer9+支持border-radius和box-shadow属性。

Firefox、Chrome以及Safari支持所有新的边框属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.div1,.div2{
			width: 100px;
			height: 100px;
			line-height: 100px;
			border: 1px solid #f00;
			text-align: center;
			color: #fff;
		}
			.div1{
				border-radius: 20px;
				-moz-border-radius:20px;
				-ms-border-radius:20px;
				-webkit--border-radius:20px;
			}
			.div2{
				margin-top: 50px;
				background-color: #00f;
				box-shadow: 10px 10px 10px orangered;
			}
		</style>
	</head>
	<body>
		<div class="div1">圆角效果</div>
		<div class="div2">阴影效果</div>
	</body>
</html>

转载请注明:大灰牛博客 » CSS3边框