border-radius的兼容问题

border-radius可以便捷的制作圆角效果，不需要通过增加圆角图片来达到效果，便于维护。

语法：border-radius:none | 1-4 length | % / 1-4 length|%

按顺序设置圆角四个方向的值，和设置border的顺序一样。

' / '前后的值都存在，那么' / '前面设置的值为水平半径，后面设置的值为垂直半径。若没有' / '，则水平和锤子半径相等。

border-radius的兼容性：
支持的浏览器有： IE9+ Firefox4+ Chrome Sarari 5+ Opera

对于老板的浏览器，需要加不同的前缀，如-moz- -webkit-

在浏览器中写法为：
-moz-border-radius:

-webkit-border-radius:

对于IE，IE9及以下不支持border-radius

低版本的IE要制作圆角效果，可以在背景上进行设置。

目前有一个办法使低版本IE兼容border-radius效果：

.box{

border-radius:15px;

behavior:url(ie-css3.htc);

}

需要下载一个htc文件，也是通过JS写的一个文件。在使用时，需要把这个文件放到服务器目录中。

注：当border-radius的值小于或者等于border的值的时候，边框内部角不再是圆角效果。

转载于:https://www.cnblogs.com/lionisnotkitty/p/6061080.html

border-radius的兼容问题相关推荐

如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
Tailwind Border
边框半径(border radius) border-redius属性用于为元素设置圆角边框,可使用border-*-radius设置四个方位的圆角.圆角的设置是通过使用半径实现的,当使用一个半径时可 ...
HTMLCSS学习笔记（二十九）——CSS Sprites的原理浏览器兼容
CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式(页脚精灵图.雪碧图).它允许你将一个页面涉及到的所有零星图片都包含到一张大图中.这样一来,浏览器在加 ...
typescript 数据类型、函数返回值、类型断言、联合类型、类型兼容
null和undefined类型:是所有类型的子类型,即可以将任意类型赋值为二者any类型:可以赋值任何类型unknown类型:引入的顶级类型unknown,对照于any,unknown是类型安全的, ...
jquery.slimscroll.js兼容firefox和动态高度计算
//解决了两个问题: //1.当页面只有一屏时,动态增加menu子节点,展开树状结构时,动态计算树的高度,不然第一次滚动时会出现滚动很多的情况 //解决方法:在338行,增加动态计算高度 getB ...
深入理解浏览器解析和执行过程
在我们公司的业务场景中,有很大一部分用户是使用老款安卓机浏览页面,这些老款安卓机性能较差,如果优化不足,页面的卡顿现象会更加明显,此时页面性能优化的重要性就凸显出现.优化页面的性能,需要对浏览器的渲染 ...
在VUE项目中使用SCSS，从安装步骤到语法说明，带你快速入门！！
最近在做VUE项目时用到了SCSS ,在这里总结一下SCSS在项目中是如何使用的. 首先要了解什么是SCSS? SCSS是一种CSS预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件 ...
css参考手册css3手册_CSS手册：面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
前端基础入门——升级页面化妆师CSS3
目录 CSS3选择器新增基本选择器子元素选择器相邻兄弟元素选择器通用兄弟选择器群组选择器属性选择器 element[attribute] 伪类选择器(权值为10) 伪元素(权值为1) CS ...

border-radius的兼容问题

border-radius的兼容问题相关推荐

最新文章

热门文章