css用边框实现圆角矩形

最新推荐文章于 2024-08-03 16:18:05 发布

AndersJing

最新推荐文章于 2024-08-03 16:18:05 发布

阅读量3.8w

点赞数 5

分类专栏： HTML 文章标签： css 边框 border 圆角矩形

本文链接：https://blog.csdn.net/lanjianhun/article/details/8710430

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天要做一个圆角矩形的按钮，于是直接找圆角矩形的css实现方式，搞了半天，虽然也实现效果了，但是很复杂，需要用很多代码，后来突然想到以前做过的一个边框效果，也是圆角矩形，于是找了出来，发现这种办法相当简单并且效果一点也不差，这里简要分享一下。

关键部分都有注释。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<title>div+CSS圆角矩形</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/CSS">
.roundedRectangle{
	height: 70px; 
	width: 100px;
	margin-top: 100px;
	background: #9BD1FA;//背景色
	border-width: 10px;	//边缘的宽度，如果要分别设置可以这样：border-width: 15px 5px 15px 5px;依次为上、右、下、左
	border-style: solid;
	border-radius: 15px;	//圆角的大小
	border-color: #000 #000 #000 #000;	//边框颜色，依次为上、右、下、左
}

.roundedRectangle p{
	margin: 0px auto;
	padding: 20px;

	text-align:center;
	font-size: 20px;
	letter-spacing:8px;
}


</style>
</head>
<body>

<div class="roundedRectangle">
	<p>测试</p>
</div>
</body>
</html>

css的边框还有很多样式，还可以改变边框的属性来实现其他的效果，详情请看：http://www.w3school.com.cn/css/css_border.asp