css border 圆角代码
作者: 本站原创 发布时间: 浏览: 次
今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法,
CSS3中的border-radius出现后,应用相当广泛,使用简单,无需再处理图片,时间是省了,而且其还有多个优点:其一减少网站的维护的工作量,少了对图片的更新制作,代码的替换等等;其二、提高网站的性能,少了对图片进行http的请求,网页的载入速度将变快;其三增加视觉美观性。既然border-radius有这么多好处,我们就从他的语法,属性和属性值等方面来看其如何应用。
有这么多,那我们就从示例开始吧:
向 div 元素添加圆角边框:
div { border:2px solid; border-radius:25px; } |
例子 1
border-radius:2em;
等价于:
border-top-left-radius:2em; //左上角
border-top-right-radius:2em; //右上角
border-bottom-right-radius:2em; //右下角
border-bottom-left-radius:2em; //左上角
上一篇:css border 阴影代码
下一篇:css3实现border渐变色