html 怎么一次性把页面(html+css)所有的圆角属性都取消掉啊? js或者jQuery?代码怎么写啊?请大神告知

html-css027

html 怎么一次性把页面(html+css)所有的圆角属性都取消掉啊? js或者jQuery?代码怎么写啊?请大神告知,第1张

body *{

-moz-border-radius: 0

-webkit-border-radius: 0

border-radius: 0

}

上面的是CSS清理Body下所有元素的圆角,如果想用 js 或 jquery 来控制是否取消圆角的话,改成

body.noradius *{

-moz-border-radius: 0

-webkit-border-radius: 0

border-radius: 0

}

//注意空格  body 与 .noradius 之间无空格,dius 与 * 之间有空格

然后 利用 js 或 jquery 给body 添加 class="noradius":

$('xxx').addClass('noradius')  //会去掉所有圆角

1.使用渐变

因为渐变可以接受一个角度,比如45deg作为方向,而且色标的位置信息也可以是绝对的长度值,不受容器尺寸的影响。把一个透明色标放在切角处,然后在相同位置设置另一个色标,并且颜色设置为想要的背景色。

4个切角,写几个 linear-gradient就是几个切角

2.使用clip-path

3.使用corner-shape

注:目前此方法还在测试中,还没有浏览器支持

【弧形切角(内凹圆角)】

圆角和阴影本身就是CSS3的属性 如果你在支持CSS3的浏览器上直接用圆角属性就可以了 然后在加阴影就不会出现这样的问题

而不支持CSS3属性的浏览器你圆角是用图片模拟出来的 那么他也没有阴影的属性 所以也不会出现这样问题

所以你的问题就是给弄混了

在支持CSS3的浏览器上用自身的属性

在不支持CSS3的浏览器上用模拟的方法

还有在IE系列下你可以下一个CSS3的.HTC文件 他用微软自带的VML语法模拟出CSS3效果 具体的你可以百度