`

div+css实现圆角边框

CSSFirefoxHTML 
阅读更多

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>

分享到：
| JS常用语句
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div+css圆角边框的制作

    div+css圆角边框的制作

    div+css呈现圆角层示例

    使用div+css样式呈现圆角层 不需要背景图片 用div层与样式来实现圆角层的

    DIV+CSS 圆角边框

    NULL 博文链接：https://javapub.iteye.com/blog/711781

    用Css实现div圆角边框

    用div+css实现边框圆角,其实实现div圆角，有三种方法，也可以用圆角片来实现，还有一种技术，现在浏览器还不是很支持。

    css3实现圆角边框

    css3中的边框一般多为矩形，也可以通过设置实现圆角边框的效果，通过border-radius:;通过设置该属性值得大小改变边框的圆角大小，从而达到自己需要的圆角边框效果

    css+圆角总结

    为HTML网页做圆角。汇集css 无图片圆角，CSS圆角区块容器，div + CSS 圆角矩，WEB2.0 圆形边框 div 使用 css 做法。

    div css圆角代码各种圆角表格_圆角边框css圆角

    div css圆角代码各种圆角表格_圆角边框css圆角

    div+css用边框实现圆角矩形(多样式)

    简洁型css圆角：  方法1： .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-...

    border-radius以外的CSS圆角边框制作方法

    CSS3的border-radius利用DIV+CSS生成圆角边框，在很多情况下都会用到，目前DIV+CSS的圆角边框，一种是利用CSS3，一种是利用布局模拟出圆角。 先说第一种，利用CSS3，前提是您的浏览器必须支持CSS3，Firefox3是支持的...

    div+css无图边框圆角实现思路及代码

    css 圆角边框的出现结束了传统使用圆角图片的时代，接下来与大家分享下div 边框圆角的实现，感兴趣的你可以参考下哈，希望对你有所帮助

    又一个CSS DIV圆角边框代码.rar

    又一个CSS DIV圆角边框代码，同样是把图片来修饰成的圆角特效，兼容IE8/火狐、Chrome等浏览器，由测试截图可看出，本实例实现上边左右两个角的圆角效果，下边则是直角，需要的朋友，自己动动手，修改一下CSS，可实现...

    CSS圆角有立体感的DIV边框

    CSS圆角有立体感的DIV边框! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    用js实现css3效果的圆角方法

    用js实现css3效果的圆角方法，代码简洁方便，效果很不错，跟大家分享一下！！

    H5+CSS3.zip

    css盒模型：块级元素，内联元素，内敛块状元素，none使元素隐身，设置宽度、高度、背景色、边框、圆角，padding内边距，margin外边距； css布局模型：流动模型flow，浮动模型float，层模型layer，层模型的绝对定位、...

    Div圆角边框CSS实例下载.rar

    Div圆角边框CSS实例下载，用图片修饰而成的圆角，虽然用了图片，不过新手容易上手，特别是对DIV css不熟悉的朋友，更易套用在自己的网站里，做留言本或评论系统超不错哦！由源码素材网提供下载，谢谢你的支持。

    Div + CSS一些特效使div变成圆角、提交按钮的特效等等

    使div变成圆角： 复制代码代码如下: border-radius: 3px; //貌似在IE中不支持，没试过 提交按钮的特效： 复制代码代码如下: background: none repeat scroll 0 0 #82C400; width:107px; //按钮的长度 height:42px...

    css定义div圆角边框.docx

    .

Magicbox
Global site tag (gtag.js) - Google Analytics