CSS圆角进化三个阶段
背景图片实现圆角
CSS2.0+HTML标签模拟圆角
CSS3.0圆角属性(border-radius属性实现圆角)
一、背景图片实现圆角
实现方式:
宽度固定,高度自适应
设置两个div,分别设置其背景图为宽度固定的圆角图,且div宽度与图片宽度一致。
//假设上圆角(top_800.gif)与下圆角背景图片(bottom_800.gif)为800px
<style type="text/css">
.top {
background:url("top_gif") 0 0 no-repeat;
width:800px;
}
.bottom {
background:url("bottom_gif") 0 0 no-repeat;
width:800px;
}
</style>
<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
<div id="bottom"></div>
</div>
</body>
宽度和高度均自适应
二、CSS2.0和HTML标签实现圆角
利用div元素,一层一层叠加,每一层比上一层多一像素。
<style type="text/css">
#radius_1 {
margin:0 2px;
height:1px;
}
#radius_2 {
margin:0 1px;
height:1px;
}
</style>
<div id="container">
<div id="radius_1"></div> //制作圆角
<div id="radius_2"></div>
<div id="contetn">内容</div>
<div id="radius_2"></div> //制作圆角
<div id="radius_1"></div>
</div>
三、CSS3.0圆角属性实现圆角
3.1 圆角属性(border-radius)属性简介
属性值:表示圆角半径,可使用长度单位px或百分比
简写属性:border-radius
分量属性:border-top-left-radius(上左)、border-top-right-radius(上右)、border-bottom-left-radius(下左)、border-bottom-right-radius(下右)(注意top和bottom在前,left和right在后)
3.2 简写属性的值设置
1个属性值:4个角半径相同
2个属性值:分别为上左和下右、上右和下左
3个属性值:分别代表上左、上右和下左、下右
4个属性值:分别代表上左、上右、下右、下左
3.3 浏览器私有前缀
解决各浏览器显示差异,针对浏览器写私有前缀:
IE内核:-ms-
FireFox内核:-moz-
谷歌浏览器、Safari内核:-webkit-