在CSS2和CSS3下实现圆角的要领
发布时间：2018-09-09 21:18:49 所属栏目：创业 来源：站长网
导读：猛火网(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 ; } 利益： （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
