div+css实现圆角边框
时间：2007-10-21 08:55:00
div+css实现圆角边框，在网络上查看了一下，很多都是实现圆角的矩形的方法，我在这里介绍的是实现圆角矩形边框的方法。
用代码说明问题：
<html>
<head>
<style>
#a{
border-left:1px #333 solid;
border-right:1px #333 solid;
width:300px;
height:500px;
}
.b{
height:1px;
overflow:hidden;
border-left:1px #333 solid;
border-right:1px #333 solid;
}
</style>
</head>
<body>
<div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div id="a">
以我的能力，纯DIV+CSS实现的效果只能做到这样了。这里是放置内容的地方，自己看一看代码的规律，很容易明白。
代码很简单，a层为放置内容的层，其width值为300，然后向外以2像素的宽度递减。最外一层要加上background为个属性，目的是要将上、下两线条呈现出来。
这里实现了3像素的圆角边框，b层的数量决定了要实现多少个像素边框。建议不要多于3层，最好是2层，即2像素圆角边框，或者1层，因为层数越多，圆角的表现就越不圆滑。在firefox IE6 都通过测试。
</div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
</div>
</body>
</html>
标签：圆角,边框,div
0
投稿猜你喜欢
使用pycharm和pylint检查python代码规范操作
2023-06-06 08:02:38
GoLang中panic与recover函数以及defer语句超详细讲解
2024-03-22 09:41:37
Python数学建模库StatsModels统计回归简介初识
2021-05-05 04:57:02
mysql中如何查询数据库中的表名
2024-01-20 03:07:32
Python中str.join()简单用法示例
2022-06-16 20:53:35
JDBC建立数据库连接的代码
2024-01-13 16:06:11
鼠标双击滚动屏幕单击停止代码
2008-02-21 11:44:00
Python cookbook（数据结构与算法）让字典保持有序的方法
2022-04-28 03:28:04
解决Python找不到ssl模块问题 No module named _ssl的方法
2022-08-23 18:01:25
vue-cli 引入jQuery，Bootstrap，popper的方法
2024-05-21 10:17:21
python实现决策树C4.5算法详解(在ID3基础上改进)
2022-05-06 08:01:57
Python时区设置方法与pytz查询时区教程
2022-05-20 17:11:51
Python+decimal完成精度计算的示例详解
2022-09-18 11:07:35
解决python-redis-lock分布式锁的问题
2023-05-23 18:57:49
jupyter实现重新加载模块
2023-12-16 20:46:45
分享四个python接口常用封装函数
2021-11-15 16:33:45
Python subprocess模块学习总结
2022-04-29 02:17:40
js 浏览器版本及版本号判断函数2009年
2024-04-28 09:40:54
Go使用协程批量获取数据加快接口返回速度
2024-05-21 10:23:38
8行代码实现Python文件去重
2023-11-20 14:47:35
