border-radius以外的以外的CSS圆角边框制作方法圆角边框制作方法
CSS3的的border-radius
利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟
出圆角。
先说第一种,利用CSS3,前提是您的浏览器必须支持CSS3,Firefox3是支持的,我看到的很多网站圆角也是利用CSS3直接
生成的,无非就是ie下依然显示直角而已,让ie固执去吧。
利用CSS3,你可以指定4个角都是圆角,或者某一个角是圆角非常方便,代码如下:
CSS Code复制内容到剪贴板
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color:#fff;
}
#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
color:#fff;
}
<div id="round"><h1>圆角边框</h1></div>
<div id="indie"><h1>部分圆角</h1></div>
不使用不使用 border-radius 实现圆角实现圆角
CSS3中,利用属性 border-radius 可以很方便的设置出圆角矩形,但是在IE8及以下版本却不支持这个属性,为了在旧版本的
浏览器中实现宽高自适应的圆角矩形,可以采用以下三种方法。
1.使用背景图片制作圆角使用背景图片制作圆角
使用背景图片制作宽、高自适应的圆角矩形,首先需要切出4个圆角图片,然后把4个圆角图片放在矩形的四个角上就大功告
成了,这一共需要5个div标签,1个容器div和4个圆角背景div。是不是很好理解。
具体实现来说,需要注意一些细节。对于矩形容器div:
上下内边距的大小至少设置为圆角的高度。
position设置为相对定位。
放置内容。
对于4个圆角背景div:
分别设置各个圆角背景图片。
绝对定位于容器矩形的四个角。
需要设置宽高值才能显示背景图片。
假设圆角图片的宽高是5px,具体代码如下:
XML/HTML Code复制内容到剪贴板
<div class="content">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="btm-left"></div>
<div class="btm-right"></div>
</div>
CSS Code复制内容到剪贴板
.content {
position: relative;
padding: 5px;
}