css3圆角样式,css3设置圆角属性名
css3.0有关圆角和渐变
IE6,IE7 圆角，颜色渐变都不支持。 IE8 不支持圆角，初步支持 渐变。 IE9 圆角，渐变 都支持，但效果不如 firefox 的好。IE渐变 css 为 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0',endColorstr='#D7D7D7',GradientType=0);
创新互联建站专注于网站建设|网站维护公司|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖电动窗帘等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身建设品质网站。
IE 9 一下想支持 圆角和渐变（ie8 稍微支持渐变）都只有用 图片了。希望能有所帮助。
CSS2和CSS3下实现圆角的不同方法
举例说明CSS圆角在CSS2和CSS3里的实现方法
在网页设计越来越精美的今天，圆角的应用已经越来越广泛这篇文章将分别讲述圆角在CSS2和CSS3里的创建方法。
从易用性来说，CSS3不需要额外的标记和图片，遂宁做网站比CSS2要先进得多。但当应用在网站上时，采用CSS2能使页面在主流浏览器上的效果更加一致。 下面将详细阐述创建圆角的各种方法和其对浏览器的兼容性。
用CSS2创建圆角的方法
1.固定宽度的圆角
这个是最简单的方法最多只需要使用两个图片（顶部和底部），并且也不需要添加额外的标记。在这里，我使用以下两个图片做背景：
优点：
用最少的标记和图片实现了圆角效果（CSS好点的童鞋只要一个图片就可以搞定了）。
缺点：
不够灵活，每次更改框架的宽度都要更新背景图片。
2.灵活的圆角
为了能让圆角更加灵活，我们可以把容器里的每个圆角都做成一个独立的元素，通过CSS强行定位到父容器的四个角上。在这个方法里，我们只需要用到右 边这个图片。
优点：
能自动适应父容器的大小，浏览器兼容性非常强。
缺点：
为了实现圆角，添加了一些没有意义的标记。
用CSS3创建圆角的方法
1.Border radius（边界半径）
W3C建议已经建议为boder增加几个属性选项，其中之一就是border-radius，目前这个属性已经被Firefox和Safari 3(Chrome)支持，比较遗憾的是IE不支持此属性。
优点：
这种方法不需要添加任何多余的标记，而且可以非常方便睇修改圆角的半径，是最易上手的方法。
缺点：
虽然符合W3C的标准，但缺乏浏览器支持。
2.多个背景图片
CSS3对background属性做出了一些重大改进，在CSS3标准里，我们可以把多个背景图片应用到同一个元素里。我们利用这个特性为容器加 上圆角效果。HTML代码与上例保持一致，在CSS中需要先把四个圆角的图片分别做好
优点：
没有多余的标记，可以分别设置每个圆角的半径。
缺点：
使用了W3C未明确定义的方法，浏览器兼容性很差，目前只有Safari和Chrome对此方法支持良好。
3.Border Image(图形边界)
使用图片作为border将是未来使用最广泛的CSS属性之一，这个属性是对border-style的升级。此属性允许您切片成的规则的9个不同部分的 图像，然后在浏览器便会作为border的基本形状来进行渲染。如右图，这种技术称为九切片缩放，可以避免圆角出现失真。我们不需要手动切开图片，CSS 能帮我们实现切片功能。
优点：
不需要添加多余的标记，使用非常简单，而且可以自由改变每个圆角的半径。
缺点：
W3C并为确定这个属性的使用方法，目前只可以用浏览器的私有属性实现，浏览器兼容性较差。目前支持这个方法的游览器有 Firefox，Chrome，Safari，Opera。
后记：
网页圆角的实现方法是目前争议较大的一个话题。还有一个通过由若干个不同宽度的Div组合做出圆角的方法，该方法对浏览器的兼容性是最强的，由于篇 幅所限，没有提及。虽然本文提及的方法都有明显的缺点，但在浏览器更新越来越快的今天，我们可以预见旧式浏览器将很快被淘汰，权当是对未来CSS写法的预 习吧。
CSS3边框与圆角
属性：一个最多可指定四个border-*-radius属性的 符合属性 ，这个属性允许你为元素添加圆角边框！
语法：border-radius:1-4 length|% / 1-4length|%
【length可为任意长度单位，比如px、em。
当使用%的时候，相对的不是字体的大小而是对应边的长度的百分比，例如border-top-left-radius:50%，那么左上角的圆角在左边的弧度是边框左边长度的50%、在上边的弧度是边框上边长度的50%；
因此如果设置border-radius:50%，那么边框将会变为一个椭圆】
兼容性：IE9+、Firefox4+，Chrome，Safari5+，Opera
-------------------------------------------------
CSS3指定每个圆角：
多值：
border-radius（四个值）:左上角 右上角 右下角 左下角
border-radius（三个值）:左上角 右上角和左下角 右下角
border-radius（两个值）:左上角和右下角 右上角和左下角
border-radius（一个值）:四个圆角值相同
border-top-left-radius:定义了左上角的弧度
border-top-right-radius:定义了右上角的弧度
border-bottom-left-radius:定义了右下角的弧度
border-bottom-right-radius:定义了左下角的弧度
box-shadow属性：可以设置一个或多个下拉阴影的框
语法：
box-shadow：h-shadow（水平位置偏移量）允许负值。必写；
v-shadow（处置位置偏移量）允许负值。必写；
blur（模糊距离）可选；
spread（阴影尺寸）可选；
color（阴影颜色）可选；
inset（内部阴影）可选；扩展属性，正值缩小，负值增大
box-shadow: 10px（横向，正值往右，负值往左） 10px（纵向，正值往下，负值网上） 10px（模糊，从边框到内容，完成渐变模糊） 10px（扩展，四周边界往外扩展10px） yellow（阴影颜色）
border-image
属性：使用border-image-*属性来构建美丽的可扩展按钮
语法：border-image:source slice width outset repeat；
兼容性：IE不兼容、Firefox、Chrome、Safari6+、Opera不兼容
-------------------------------------------------
border-image-source属性
border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式
语法
border-image-source：none；
border-image-source：url("...")；
-------------------------------------------------
border-image-slice属性
border-image-slice属性指定图像的边界向内偏移
语法
border-image-slice：number|%|fill；
-------------------------------------------------
border-image-width属性
brder-image-width属性指定图像边界的宽度
语法
border-image-width：number|%|auto；
-------------------------------------------------
border-image-outset属性
border-image-outset用于指定在边框外部绘制border-image-area的量
语法
border-image-outset：length|number；
-------------------------------------------------
border-image-repeat属性
该属性用于图像边界是否重复（repeated）、拉伸（stretched）或铺满（rounded）
语法：border-image-repeat：stretch|repeat|round|initial|inherit；
分享文章：css3圆角样式,css3设置圆角属性名
当前URL：http://ybzwz.com/article/dsddjjc.html
