CSS3的border-radius利用DIV+CSS生成圆角边框，在很多情况下都会用到，目前DIV+CSS的圆角边框，一种是利用CSS3，一种是利用布局模拟出圆角。

先说第一种，利用CSS3，前提是您的浏览器必须支持CSS3，Firefox3是支持的，我看到的很多网站圆角也是利用CSS3直接生成的，无非就是ie下依然显示直角而已，让ie固执去吧。

利用CSS3，你可以指定4个角都是圆角，或者某一个角是圆角非常方便，代码如下：

CSS Code复制内容到剪贴板

#round{

background-color:#000;

border:1pxsolid#000;

-moz-border-radius:10px;

-webkit-border-radius:10px;

color:#fff;

}

#indie{

background-color:#000;

border:1pxsolid#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;

}

圆角边框

部分圆角

不使用 border-radius 实现圆角CSS3中，利用属性 border-radius 可以很方便的设置出圆角矩形，但是在IE8及以下版本却不支持这个属性，为了在旧版本的浏览器中实现宽高自适应的圆角矩形，可以采用以下三种方法。

1.使用背景图片制作圆角

使用背景图片制作宽、高自适应的圆角矩形，首先需要切出4个圆角图片，然后把4个圆角图片放在矩形的四个角上就大功告成了，这一共需要5个div标签，1个容器div和4个圆角背景div。是不是很好理解。

具体实现来说，需要注意一些细节。对于矩形容器div：

上下内边距的大小至少设置为圆角的高度。

position设置为相对定位。

放置内容。

对于4个圆角背景div：

分别设置各个圆角背景图片。

绝对定位于容器矩形的四个角。

需要设置宽高值才能显示背景图片。

假设圆角图片的宽高是5px，具体代码如下：

XML/HTML Code复制内容到剪贴板

html圆角边框只有左边,border-radius以外的CSS圆角边框制作方法相关推荐

css圆角边框怎么设置
css+div是页面设计的法宝,通过css+div能够设计出各种效果!本文给大家简单介绍下css圆角边框怎么设置,大家可以参考,也可以直接拿过去使用,当然要修改下具体的参数. border-radiu ...
如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
制作个人简历网页代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
css样式向下补白,div+css[3]：css中边框border与补白padding属性设置
1.边框属性 border □ 边框样式 border-style:none|dotted|dashed|solid|...... none:没有边框. dotted点线 dashed虚线 solid ...
border属性 php,使用CSS的border属性构建变形边框的方法总结
border是最常用的用来制作各种各样p边框的CSS属性,这里我们整理了使用CSS的border属性构建变形边框的方法总结,最主要的还是基于三角形的一些图形变换: border基础回顾border 顾 ...
前端----HTML/CSS 圆角边框
border的边框默认是直角矩形的,很多网页的边框都是圆角的,看起来很圆滑,舒服了不少其实方法特别简单,css中的一个border-radius属性就够了这个属性是CSS 3支持的属性值是圆角的 ...
html 文本框css设置边框圆角
html 文本框css设置边框圆角如下图: css代码如下:input{border:1px solid black;width:295px;height:40px;border-radius:25p ...
html 中圆角怎么写,css圆角边框代码怎么写？（代码示例）
本篇文章主要给大家介绍css边框效果怎么实现的. css圆角边框代码具体示例如下: css圆角边框代码实例 div { color: white; text-align:center; border: ...

html圆角边框只有左边,border-radius以外的CSS圆角边框制作方法

圆角边框

部分圆角

html圆角边框只有左边,border-radius以外的CSS圆角边框制作方法相关推荐

最新文章

热门文章