用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - css代码库

CSS圆角边框

2012-10-01 作者: 神马举报

[css]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS圆角边框</title>
<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {
	margin:0 10px;
	letter-spacing:1px;
	padding:0;
}
#xsnazzy h1 {
	font-size:2.5em;
	color:#A95051;
}
#xsnazzy h2 {
	font-size:2em;
	color:#7B793B;
	border:0;
}
#xsnazzy p {
	padding-bottom:0.5em;
}
#xsnazzy h2 {
	padding-top:0.5em;
}
#xsnazzy {
	background: transparent;
	margin-top: 100px;
	margin-right: 10em;
	margin-bottom: 100px;
	margin-left: 10em;
}
.xtop, .xbottom {
	display:block;
	background:transparent;
	font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
	display:block;
	overflow:hidden;
}
.xb1, .xb2, .xb3 {
	height:1px;
}
.xb2, .xb3, .xb4 {
	background:#FFF;
	border-left:1px solid #A93298;
	border-right:1px solid #A93298;
}
.xb1 {
	margin:0 5px;
	background:#A93298;
}
.xb2 {
	margin:0 3px;
	border-width:0 2px;
}
.xb3 {
	margin:0 2px;
}
.xb4 {
	height:2px;
	margin:0 1px;
}
.xboxcontent {
	display:block;
	background:#FFF;
	border:0 solid #A93298;
	border-width:0 1px;
}
</style>
</head>

<body>
<div id="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
  <div class="xboxcontent">
    <p>CSS圆角边框</p>
    <p>CSS圆角边框</p>
    <p>CSS圆角边框</p>
  </div>
  <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div>
</body>
</html>

[代码运行效果截图]


CSS圆角边框


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...