在CSS2和CSS3下实现圆角的方法
发布时间：2018-09-09 23:50:46 所属栏目：经验 来源：站长网
导读：烈火网(LieHuo.Net)教程 在以前的文章中，烈火网不止一次提到过CSS圆角的教程（查看详细），今天在Bolo's blog再次看到关于CSS圆角的实现，有所不同的是，Bolo's blog中分别讲到CSS2与CSS3的实现方法。 推荐阅读：CSS中文手册 步入正文： 在网页设计越来越
|
烈火网(LieHuo.Net)教程 在以前的文章中，烈火网不止一次提到过CSS圆角的教程（查看详细>>>），今天在Bolo's blog再次看到关于CSS圆角的实现，有所不同的是，Bolo's blog中分别讲到CSS2与CSS3的实现方法。 推荐阅读：CSS中文手册 步入正文： 在网页设计越来越精美的今天，圆角的应用已经越来越广泛这篇文章将分别讲述圆角在CSS2和CSS3里的创建方法。 从易用性来说，CSS3不需要额外的标记和图片，比CSS2要先进得多。但当应用在网站上时，采用CSS2能使页面在主流浏览器上的效果更加一致。下面将详细阐述创建圆角的各种方法和其对浏览器的兼容性。 注：本文以第一个配图的效果作为演示。 用CSS2创建圆角的方法1.固定宽度的圆角这个是最简单的方法最多只需要使用两个图片（顶部和底部），并且也不需要添加额外的标记。在这里，我使用以下两个图片做背景：
HTML： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<div class="box"> <h2>This is a heading</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst. </div> CSS: Copy to Clipboard 引用的内容：[www.veryhuo.com]
.box { width:200px; background-color:#EE2E24; background:url("img/rounded-top.jpg") no-repeat left bottom; color:#fff;} .box h2 { background:url("img/rounded-top.jpg") no-repeat left top; padding: 10px 10px 0 10px; } .box p { padding: 10px; } 优点：用最少的标记和图片实现了圆角效果（CSS好点的童鞋只要一个图片就可以搞定了）。 缺点：不够灵活，每次更改框架的宽度都要更新背景图片。 2.灵活的圆角为了能让圆角更加灵活，我们可以把容器里的每个圆角都做成一个独立的元素，通过CSS强行定位到父容器的四个角上。在这个方法里，我们只需要用到右边这个图片。 引用的内容：[www.veryhuo.com]
<div class="box"> <span class="crnr tl"></span> <span class="crnr tr"></span> <h2>This is a heading</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst. <span class="crnr bl"></span> <span class="crnr br"></span> </div> CSS： Copy to Clipboard 引用的内容：[www.veryhuo.com]
.box { position:relative; width:200px; height:200px; } .crnr { position:absolute; background:url("img/crnr-sprite.jpg") no-repeat; width:20px; height:20px; } .tl { left:0; top:0; background-position: 0 0 ; } .tr { right:0; top:0; background-position: -25px 0 ; } .bl { left:0; bottom:0; background-position: 0 -25px ; } .br { right:0; bottom:0; background-position: -25px -25px ; } 优点： （编辑：源码网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
