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

CSS 边框实现圆角矩形

2014-05-04 18:41 204 查看

<!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>

—————————————————————————————————

本文原创自Slience的csdn技术博客。

本博客所有原创文章请以链接形式注明出处。

欢迎关注本技术博客，本博客的文章会不定期更新。

大多数人想要改造这个世界，但却罕有人想改造自己。

世上没有绝望的处境，只有对处境绝望的人。

————By slience

—————————————————————————————————

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

标签： linux css

相关文章推荐

新的分享

章节导航