您的位置：首页 > Web前端 > CSS

css用边框实现圆角矩形

2013-03-24 10:27 441 查看

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

关键部分都有注释。

[html] view
plaincopy

<!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>heihei</p>

</div>

</body>

</html>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航