css3.0有关圆角和渐变

发布网友 发布时间：2022-04-20 05:10

我来回答

共6个回答

热心网友 时间：2022-04-06 12:43

IE6,IE7 圆角，颜色渐变都不支持。 IE8 不支持圆角，初步支持 渐变。 IE9 圆角，渐变 都支持，但效果不如 firefox 的好。IE渐变 css 为 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0',endColorstr='#D7D7D7',GradientType=0);
IE 9 一下想支持 圆角和渐变（ie8 稍微支持渐变）都只有用 图片了。希望能有所帮助。

热心网友 时间：2022-04-06 14:01

css3圆角样式是这样写的：
.box{ border-radius:5px}
但是为了更加兼容，我们需要对主流浏览器加上浏览器识别符号，同时用PIE.htc文件使其兼容的ie6-ie8。
.yuan {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/*设置相对定位，触发pie.htc，这样就兼容到ie6-ie8了，.htc文件一般都是浏览器补丁，常用在兼容处理上，类似的还有iecss3.htc文件
*/

position:relative;
behavior: url(PIE.htc) ；

width:330px;
height:200px;
}

css3中的渐变效果建议不要使用，因为很多用户还是使用低版本浏览器，虽然ie6已宣布死亡，但是ie6-ie8的浏览器还是有很多市场的，我们做网站设计的公司做过调查，很多中小企业还是在使用ie6-ie8，所以这个只能暂时使用图片形式。

渐变：
background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

热心网友 时间：2022-04-06 15:35

圆角:border-radius
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
渐变：
background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

想看更多去w3c潮流前端网

热心网友 时间：2022-04-06 17:27

border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEFF99', endColorstr='#66EE33');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEFF99', endColorstr='#66EE33'); /* IE8 */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(pie.htc);希望能帮到你。

热心网友 时间：2022-04-06 19:35

圆角:border-radius
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
渐变：
background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

热心网友 时间：2022-04-06 21:59

用pie http://css3pie.com/ 这是网址