css实现的圆角效果带有注释
发布时间：2013-09-04 16:26:05 作者：佚名 
我要评论
我要评论css圆角效果的出现引起了网友们的关注，下面以个示例为大家介绍下具体的实现过程，带有注释，新手朋友们容易看的懂
圆角注释
/**
*这个圆角的思路在于，用缩小化的视觉感受体现的,其实每一个弯角是用两个像素的"-"与一个像素的"."与两个像素的"|"实现的.
*b1与b1b相对，通过背景来制作边框
*b2与b2b相对，通过border-width:2px制作2个像素的"-"
*b3与b3b相对，制作1个像素的"."
*b4与b4b相对，制作2个像素的"|"这样就从视觉上感觉是一个圆弧了。
*/
/*确定为block，为了让左右边框实现*/
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{
display:block;
overflow:hidden;
}
/*高度为一的主要目的是为了让b1,b1b作为的背景色当作上下线*/
.b1,.b2,.b3,.b1b,.b2b,.b3b{
height:1px;
}
/*左右边框的颜色与大小*/
.b2,.b3,.b4,.b3b,.b4b,.b2b,.b{
border-left:1px solid #999;
border-right:1px solid #999;
}
/*注意每个的左右边距与颜色*/
.b1,.b1b{
margin:0px 5px;background:#999;
}
/*边距为3少了2个像素 - */
.b2,.b2b{
margin:0px 3px;border-width:2px;
}
/*边距为2少了一个像素 . */
.b3,.b3b{
margin:0px 2px;
}
/*边距为1少了一个像素 |*/
.b4,.b4b{
margin:0px 1px; height:2px;
}
/*div的背景色与border的背景色要不同*/
.d1{
background:#f7f8f9;
}
/*宽度指定*/
.k{
height:300px;
}
</style>
</head>
<body>
<div>
<b class="b1"></b>
<b class="b2 d1"></b>
<b class="b3 d1"></b>
<b class="b4 d1"></b>
<div class="b d1 k">
<font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
</div>
<b class="b4b d1">
</b><b class="b3b d1">
</b><b class="b2b d1">
</b><b class="b1b"></b>
</div>
复制代码
代码如下:/**
*这个圆角的思路在于，用缩小化的视觉感受体现的,其实每一个弯角是用两个像素的"-"与一个像素的"."与两个像素的"|"实现的.
*b1与b1b相对，通过背景来制作边框
*b2与b2b相对，通过border-width:2px制作2个像素的"-"
*b3与b3b相对，制作1个像素的"."
*b4与b4b相对，制作2个像素的"|"这样就从视觉上感觉是一个圆弧了。
*/
/*确定为block，为了让左右边框实现*/
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{
display:block;
overflow:hidden;
}
/*高度为一的主要目的是为了让b1,b1b作为的背景色当作上下线*/
.b1,.b2,.b3,.b1b,.b2b,.b3b{
height:1px;
}
/*左右边框的颜色与大小*/
.b2,.b3,.b4,.b3b,.b4b,.b2b,.b{
border-left:1px solid #999;
border-right:1px solid #999;
}
/*注意每个的左右边距与颜色*/
.b1,.b1b{
margin:0px 5px;background:#999;
}
/*边距为3少了2个像素 - */
.b2,.b2b{
margin:0px 3px;border-width:2px;
}
/*边距为2少了一个像素 . */
.b3,.b3b{
margin:0px 2px;
}
/*边距为1少了一个像素 |*/
.b4,.b4b{
margin:0px 1px; height:2px;
}
/*div的背景色与border的背景色要不同*/
.d1{
background:#f7f8f9;
}
/*宽度指定*/
.k{
height:300px;
}
</style>
</head>
<body>
<div>
<b class="b1"></b>
<b class="b2 d1"></b>
<b class="b3 d1"></b>
<b class="b4 d1"></b>
<div class="b d1 k">
<font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
</div>
<b class="b4b d1">
</b><b class="b3b d1">
</b><b class="b2b d1">
</b><b class="b1b"></b>
</div>
相关文章
- 字符代替圆角尖角也是一种在不使用代码和图片的另类实现吧，本文整理了一些常用的示例，感兴趣的朋友可以收藏下2013-09-12
- 想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下： 但凡是前端工程师，都知道IE6，IE7，IE8不支2013-07-02
- css圆角卷起了一阵风波，只用css来做圆角矩形的技术很早就有了,但是在网页的设计过程中,我们通常用图片实现圆角矩形效果。现在网上很多关于无图片实现css圆角矩形的方法,虽2013-03-25
- css 圆角边框的出现结束了传统使用圆角图片的时代，接下来与大家分享下div 边框圆角的实现，感兴趣的你可以参考下哈，希望对你有所帮助2013-03-15
- 本文将开拓性的探讨如何使用字符代替图片实现貌似只有图片才能实现的尖角效果，或是多半使用图片实现的圆角效果;本文提到的一些方法，可能在实际项目中并不实用，关键是帮2013-02-27
- 今天处理了一个页面刷新随机显示图片的功能，发现直角太丑，想实现图片圆角，兼容所有浏览器,于是网上搜集整理了一下，拿出来和大家分享2012-12-06
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。2012-03-28- 实现的方法很简单，其实就是套2层，其中外层用长背景，内层用短背景盖住。拿高度自适应来说，可以用一个div（用长背景居底铺）嵌套一个h2（用短背景居顶铺）标签2012-02-17
background-postion定位与图片结合实现圆角效果
background-postion 背景默认铺设位置的起点为：元素的左上角.2011-07-27- 矩形框在网页中较为常见，不过个人觉得还是圆角框更为美观。那么圆角框是如何用DIV+CSS来实现的呢？2011-07-10
最新评论