CSS3让网页设计者脱离图片,通过简单的CSS属性实现强大的页面展现。这样不仅仅减小了服务器的请求压力,同样也会使网页打开速度明显提高。
border-radius这个属性,是标准的创建圆角的属性,全面的支持Chrome、FireFox和safari.通常我们的写法如下:
写道
border-radius: 10px; /* CSS3 Property */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome/Safari */ -khtml-border-radius: 10px; /* Linux browsers */
这四个属性理解起来很简单。分别设置四个角的圆角弧度10px.你也能按照你的设计改变任何一个角的弧度,跟padding、margin一样,你能分别设置左上、右上、右下、左下四个角的弧度。
写道
/* Firefox */ -moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
也能将四个属性混合在一起使用。顺序为:
[左上] [右上] [右下] [左下]顺时针方向
写道
-moz-border-radius: 10px 20px 30px 0;
接下来,我们看在IE下面,这个属性的用法。前段设计者都知道,在写CSS时,IE是比较变态的。要作为特殊进行处理。然而CSS3仅有部分属性是支持IE9的,我们怎样才能让他在IE其他版本浏览器中无缝衔接呢?
首先,要从Google Code下载一个 curved-corner.htc 文件,把他按照下面的属性的写法部署到主题包或者写在你的CSS样式文件中。
写道
.Corners {
behavior: url(Location of border-radius.htc file);
border-radius: 20px;
}
按照你的路径,修改部署到服务器上。这样,就可以在IE其他版本下,放心的使用CSS3的圆角属性了。。。
分享到:
相关推荐
让IE浏览器支持CSS3圆角属性的方法.docx
css3教程应用css3 圆角border-radius属性制作...
IE 和 Opera 就没有私有的圆角属性了,如果有的话,那制作圆角应该就简单多了,把各自的私有属性全部写上,让各个浏览器对号入座,就达到了兼容的效果。 随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web ...
解决IE不兼容css3圆角和阴影问题
让IE6、IE7、IE8支持CSS3的圆角、阴影样式.
CSS3圆角详解 一、CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些...CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这.....
我们都知道IE6,7并不支持CSS3的属性,IE8也不能很好的支持CSS3。但是有一个小脚本能够做到,它可以让IE支持 CSS3,包括:border-radius (rounded), box-shadow ( shadow), text-shadow等……
前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持...
css3中的边框一般多为矩形,也可以通过设置实现圆角边框的效果,通过border-radius:;通过设置该属性值得大小改变边框的圆角大小,从而达到自己需要的圆角边框效果
selectivizr让IE6-9获得css3的选择器之外,或获得了圆角、阴影、渐变色资源等css3属性的支持
几个常用插件,让ie8兼容html5和css的圆角,阴影、渐变、placeholder等属性
圆角CSS3动画线条边框代码特效是一款基于CSS属性animation动画制作,效果流畅弹性十足。
让IE实现CSS3中的border-radius(圆角)
这是一个css3里的属性处理圆角技术的问题,其中也包括用全用js处理圆角问题,在这里提供大家,希望对大家做网页有点用
一些由HTML5/CSS3编写实现的按钮特效,全部是一些圆角的按钮效果,看上去挺有美感的,还有鼠标悬停特效,放在按钮上,按钮背景会有轻微变化,满足操作时的响应功能,因使用有CSS3部分属性,因此测试请使用火狐或...
css3和css,在编写code的时候,除了对一些css3中新出现的属性设置,其它完全一样。 CSS3新增属性 box-shadow(阴影效果) border-colors(为边框设置多种颜色) boder-image(图片边框) text-shadow(文本阴影) ...
通过引入htc文件,使ie可以支持css3的属性
今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...