利用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" c />
<title>无标题文档</title>
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

复制代码

这是一个圆角矩形

显示全部楼层

<style type="text/css">
<!--
#ibox01 {
overflow: hidden;
height: 1px;
margin-right: 5px;
margin-left: 5px;
background-color: #CC0000;
}
#ibox02 {
height: 1px;
margin-right: 3px;
margin-left: 3px;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CC0000;
border-left-color: #CC0000;
overflow: hidden;
}
#ibox03 {
height: 1px;
margin-right: 2px;
margin-left: 2px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CC0000;
border-left-color: #CC0000;
overflow: hidden;
}
#ibox04 {
overflow: hidden;
height: 1px;
margin-right: 1px;
margin-left: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CC0000;
border-left-color: #CC0000;
}
#ibox05 {
overflow: hidden;
height: 1px;
margin-right: 1px;
margin-left: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CC0000;
border-left-color: #CC0000;
}
#boxcon {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CC0000;
border-left-color: #CC0000;
}
.testlayer {
height: 200px;
width: 300px;
}
.testboxbg {
background-color: #666666;
}
.testboxcon {
height: 190px;
background-color: #666666;
position: relative;
}
-->
</style>
<div class="testlayer">
<div id="ibox">
<div id="ibox01" class="testboxbg"></div>
<div id="ibox02" class="testboxbg"></div>
<div id="ibox03" class="testboxbg"></div>
<div id="ibox04" class="testboxbg"></div>
<div id="ibox05" class="testboxbg"></div>
<div id="boxcon" class="testboxcon"></div>
<div id="ibox05" class="testboxbg"></div>
<div id="ibox04" class="testboxbg"></div>
<div id="ibox03" class="testboxbg"></div>
<div id="ibox02" class="testboxbg"></div>
<div id="ibox01" class="testboxbg"></div>
</div>
</div>

复制代码

做到圆角样式可以重复使用，并且不同包含内容用不同的Class进行设置，可以更换背景

样式.testboxcon 用了一个“相对”定位，主要是给里面的多个内容定位做一个参考

最外面的div class=“testlayer” 主要是在在大布局时给圆角一个“区域”

这个圆角在FF中，可以兼容显示

另外，建议大家在做圆角的时候，最好把弧度控制在5*5px的区域内，10px弧度不好看，而且计算起来比较麻烦

纳速健身网“纳速币”免费获得全攻略！多种方式

武术基本功合集

积极维护防汛救灾网络秩序倡议书

八式太极拳镜面教学视频[李德印/邱慧芳]

windows使用钉钉电脑版怎样关闭开机自动启动?

收藏夹在哪里

[文摘] 利用css制作圆角方框演示代码

星点云香港服务器，CN2高速连接,ping值低可免费换IP,安全稳定,技术团队24小时在线稳定无忧

精彩评论1

一个CSS圆角效果