圆角在CSS2和CSS3里的创建方法
更新时间:2024-06-03 13:46:01 阅读量: 综合文库 文档下载
- 圆角在三视图中能看到吗推荐度:
- 相关推荐
圆角在CSS2和CSS3里的创建方法
内容提要: 从易用性来说,CSS3不需要额外的标记和图片,比CSS2要先进得多。但当应用在网站上时,采用CSS2能使页面在主流浏览器上的效果更加一致。下面将详细阐述创建圆角的各种方法和其对浏览器的兼容性。
在网页设计越来越精美的今天,圆角的应用已经越来越广泛这篇文章将分别讲述圆角在CSS2和CSS3里的创建方法。
从易用性来说,CSS3不需要额外的标记和图片,比CSS2要先进得多。但当应用在网站上时,采用CSS2能使页面在主流浏览器上的效果更加一致。下面将详细阐述创建圆角的各种方法和其对浏览器的兼容性。 注:本文以第一个配图的效果作为演示。
用CSS2创建圆角的方法
1.固定宽度的圆角
这个是最简单的方法最多只需要使用两个图片(顶部和底部),并且也不需要添加额外的标记。在这里,我使用以下两个图片做背景:
HTML:
1
2
This is a heading
3 Lorem ipsum dolor sit amet,
4 consectetur adipiscing elit. Sed 5 vehicula ligula eu diam tincidunt 6 fermentum. Curabitur facilisis 7 enim non libero cursus eu varius 8 enim suscipit. Ut venenatis
9 vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat 10
eget ornare erat facilisis. In hac 11
habitasse platea dictumst. 12
13
CSS:
.box {
1 width:200px;
2 background-color:#EE2E24;
3 background:url(\) no-repeat 4 left bottom;
5 color:#fff;} 6
7 .box h2 {
8 background:url(\) no-repeat 9 left top;
padding: 10px 10px 0 10px; 10 } 11 12
.box p { 13
padding: 10px; 14 }
优点:
用最少的标记和图片实现了圆角效果(CSS好点的童鞋只要一个图片就可以搞定了)。
缺点:
不够灵活,每次更改框架的宽度都要更新背景图片。
2.灵活的圆角
为了能让圆角更加灵活,我们可以把容器里的每个圆角都做成一个独立的元素,通过CSS强行定位到父容器的四个角上。在这个方法里,我们只需要用到右边这个图片。
HTML:
1 2
This is a heading
3 Lorem ipsum dolor sit amet, 4 consectetur adipiscing elit. 5 Sed6 vehicula ligula eu diam 7 tincidunt
8 fermentum. Curabitur facilisis
non libero cursus eu varius 9 enim
enim suscipit. Ut venenatis 10
vehicula lorem ut hendrerit. Ut 11
adipiscing augue sed ante 12
volutpat 13
eget ornare erat facilisis. In 14
hac 15
habitasse platea dictumst. 16
17
CSS:
1 .box {
2 position:relative; 3 width:200px; 4 height:200px; 5 } 6
7 .crnr {
8 position:absolute;
9 background:url(\) no-repeat; 10
width:20px; 11
height:20px; 12
} 13 14
.tl { 15
left:0; 16
top:0; 17
background-position: 0 0 ; 18
} 19 20
.tr { 21
right:0; 22
top:0; 23
background-position: -25px 0 ; 24
} 25 26
.bl { 27
left:0; 28
bottom:0; 29
background-position: 0 -25px ; 30
} 31 32
.br { 33
right:0; 34
bottom:0; 35
background-position: -25px -25px ; 36
}
优点:
能自动适应父容器的大小,浏览器兼容性非常强。
缺点:
为了实现圆角,添加了一些没有意义的标记。
用CSS3创建圆角的方法
1.Border radius(边界半径)
W3C建议已经建议为boder增加几个属性选项,其中之一就是border-radius,目前这个属性已经被Firefox和Safari 3(Chrome)支持,比较遗憾的是IE不支持此属性。
HTML:
1
2
This is a heading
3 Lorem ipsum dolor sit amet,4 consectetur adipiscing elit. Sed 5 vehicula ligula eu diam tincidunt 6 fermentum. Curabitur facilisis 7 enim non libero cursus eu varius 8 enim suscipit. Ut venenatis
9 vehicula lorem ut hendrerit. Ut 10 adipiscing augue sed ante volutpat 11 eget ornare erat facilisis. In hac 12 habitasse platea dictumst. 13
CSS:
.box { 1
width:200px; 2
height:200px; 3
background-color:#EE2E24; 4
-moz-border-radius: 20px; 5 -webkit-border-radius: 20px; 6
border-radius: 20px; 7 } 8
优点:
这种方法不需要添加任何多余的标记,而且可以非常方便睇修改圆角的半径,是最易上手的方法。
正在阅读:
圆角在CSS2和CSS3里的创建方法06-03
spss中怎样进行fisher精确概率法统计 - 图文12-25
七年级数学下册 10.1 二元一次方程教案(新版)苏科版06-15
2015年春季八年级下册历史期末考试卷06-07
中华人民共和国国家标准公文格式04-11
吸附热力学及动力学的研究05-30
小学生写草原的作文06-15
邻居有【鬼】08-02
- 多层物业服务方案
- (审判实务)习惯法与少数民族地区民间纠纷解决问题(孙 潋)
- 人教版新课标六年级下册语文全册教案
- 词语打卡
- photoshop实习报告
- 钢结构设计原理综合测试2
- 2014年期末练习题
- 高中数学中的逆向思维解题方法探讨
- 名师原创 全国通用2014-2015学年高二寒假作业 政治(一)Word版
- 北航《建筑结构检测鉴定与加固》在线作业三
- XX县卫生监督所工程建设项目可行性研究报告
- 小学四年级观察作文经典评语
- 浅谈110KV变电站电气一次设计-程泉焱(1)
- 安全员考试题库
- 国家电网公司变电运维管理规定(试行)
- 义务教育课程标准稿征求意见提纲
- 教学秘书面试技巧
- 钢结构工程施工组织设计
- 水利工程概论论文
- 09届九年级数学第四次模拟试卷
- 圆角
- 创建
- 方法
- CSS2
- CSS3
- 中国大学生消费者的奢侈品消费动机研究
- 心理咨询室学生档案记录表1
- 浅析通海银饰营销现状与发展趋势 - 图文
- 基础会计期末复习试卷总论(含答案)
- 中学生心理健康测试题
- 2.第二单元 春天的脚步(北师大版语文三年级下册)
- 自来水公司管理制度大纲
- 2016上半年教师资格证考试《中学教育知识与能力》真题答案解读
- 南京大学语文(本)第一次作业
- 六年级下册句子练习题(1-21)答案
- 浅谈我国侵权责任中的补充责任
- 医院污水处理技术方案
- 食品包装的多样性及其形式表达毕业论文 - 图文
- 小学5年级下册汉语教案(普通版-母语班)
- 2009年秋季学期八年级数学期中检测试题卷
- 某县重要饮用水水源地安全保障达标建设方案
- 2018年译林版小学英语六年级下册(6B)期中试题
- 《专业技术人员职业发展政策法规学习》第二讲测试
- 英语六级词汇
- 分析化学题库及答案