当前位置:首页 >> 网页设计 >> 浏览文章

用CSS2创建圆角的方法

作者:admin 日期:2010年11月19日 来源:本站原创 浏览:

1.固定宽度的圆角

这个是最简单的方法最多只需要使用两个图片(顶部和底部),并且也不需要添加额外的标记。在这里,我使用以下两个图片做背景: 

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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好点的童鞋只要一个图片就可以搞定了)。

缺点:

不够灵活,每次更改框架的宽度都要更新背景图片。

上一篇文章:做网站设计为什么要会SEO的原因
下一篇文章:没有了

点金商务引擎是什么?
      点金商务引擎是由深圳点金信息技术有限公司推出的一款网络营销软件。它搜集了全球2000多个优秀的商贸网站,集中最丰富的商业信息。它将引导企业通过互联网宣传产品,寻找客户,让企业无须丰富的网络知识,轻松实现网络营销。
更多>>

相关导航:建站经验网站SEO优化WEB2.0搜索引擎flash技术网络编程虚拟主机域名网络安全服务器营销知识营销研究营销技巧营销策略营销新闻网站策划
Copyright(C) 2009-2010 石家庄辉煌园商贸有限公司 版权所有
咨询热线: 0311-88708888 0311-88709888 0311-88709766 0311-88709840
网址:www.huihuangyuan.cn 电子邮件:86234885@163.com 监督电话:13700319526
在线QQ:543130132 MSN:sjz139@hotmail.com 公司地址:石家庄市裕华区方兴路68号(二机厂北) 冀ICP备09008299号-3