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/ 这是网址
css3旋转半径的计算
一、圆角(Rounded Corner).box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 30px; /* Saf3+, Chrome */ border-radius: 30px; /* Opera 10.5, IE 9 */ } 圆角的实现比较简单,只要设好一个半径值就可以了。遗憾的是,目前所有的IE都不支持CSS圆角,要...
css3有哪些新特性 包含哪些模块
border-color:控制边框颜色,并且有了更大的灵活性,可以产生渐变效果 border-image:控制边框图象 CSS3边框border-corner-image:控制边框边角的图象 border-radius:能产生类似圆角矩形的效果 背景(Backgrounds)background-origin:决定了背景在盒模型中的初始位置,提供了3个值,border, padding和content borde...
css3有哪些新特性?包含哪些模块?
1、CSS3圆角表格圆角表格,对应属性:border-radius。2、以往对网页上的文字加特效只能用filter这个属性,这次CSS3中专门制订了一个加文字特效的属性,而且不止加阴影这种效果。对应属性:font-effect。4、在文字下点几个点或打个圈以示重点,CSS3也开始加入了这项功能,这应该在某些特定网页上很有用。
网站css如何实现圆角
用curvyCorners就可以轻松解决这个问题的。不但可以实现容器圆角,还可以让图片也圆角
...把矩形框的边角弄成圆的,不要是尖的角,要圆的,用css样式写的...
在css里加如下的代码:border: 5 solid gray;border-radius:10px;如过你不想要边框,去掉 border: 5 solid gray;就行了。注意:Firefox 3.5,Firefox 3.0,Safari 3.1,Chrome 2.0.x,Chrome 1.0.x可用 参考资料:自己
如何制作这样的圆角表格,看图
直接把那个圆角图切出来,设置成DIV的背景!DIV本身理论上是有方法能实现圆角效果的,但实际应用却很难做到! 通常都是直接把圆角的图作为背景就可以了!!!想做自适应的圆角,那就在 大DIV里放两个小DIV加圆角背景, 分别左浮动 和右浮动!不过这么做对搜索引擎的确不友好! 用li 也行 ...
div+css如何实现圆角矩形
具体操作步骤如下:1、首先打开sublime text软件,新建一个html文件,输入基本的html结构:2、然后设置一个div,并设置div的class属性,在上方的style中设置样式,设置背景颜色、高度和宽度并设置border边框和边框的圆角属性,完成后保存:3、最后打开浏览器就可以看到效果:...
div+css写圆角样式
一种方法是做很多个高度为1px,左右带边框的DIV,然后宽度递增或递减一像素的DIV;border-radius可以直接设置;不过低版本的IE不支持
dreamweaver里面怎么把表格设置成圆角?
1.纯代码,原理为用标签边框模拟圆角处的像素,你把一个圆角效果放大n倍后你会发现再圆的角也是由1px的小块组成,这样就好办了!如下:内容 然后设置,t1 t2 t3 ...高为1px。左右边框为1px。一次左右边距加1.(如t1的margin为5,那么t2就为4.。类推!!)这里讲原理,具体如何才更圆,你可以...
DIV+CSS中的圆角该怎么实现
我试过了,火狐和Google目前支持3.0圆角,IE8.0没试过,.round { background-color: #666;color: #fff;line-height: 20px;width: 200px;padding: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;} 其他的圆角实现的话给你个网页你看看源代码:http://www.jscode.cn/jscode/...