Css3圆角边框

最新推荐文章于 2024-08-01 00:00:45 发布

luckystar2008

最新推荐文章于 2024-08-01 00:00:45 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/qincidong/article/details/84483482

版权

Html5&Css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1行代码搞定CSS3的圆角。

webkit核心浏览器使用-webkit-border-radius，如-webkit-border-radius:10px;

firefox浏览器使用-moz-border-radius，如-moz-border-radius:10px;

其他浏览器使用border-radius:10px;

示例：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gb18030">
	<title> CSS3圆角边框 </title>
	<style type="text/css">
		div#radius{
			margin-left:25%;
			width:50%;
			height:100px;
			display:block;
			background-color:#F37D31;
			color:white;
			text-align:center;
			-webkit-border-radius:10px;
			-moz-border-radius:10px;
			border-radius:10px;
		}
	</style>
</head>

<body>
	<div id="radius">Css3实现圆角边框</div>
</body>
</html>

效果：