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的值的时候,边框内部角不再是圆角效果。

border-radius的兼容问题的更多相关文章

  1. uniapp自定义顶部搜索框兼容微信小程序

    zhuanzai:  uniapp自定义顶部搜索框兼容微信小程序 自定义组件 navbarvue (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度 < ...

  2. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

  3. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  4. 为什么要使用sass

    或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...

  5. CSS3:线上编辑工具及实用资料整理

    an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...

  6. CSS3 基本知识

    1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...

  7. 转:前端集锦:十款精心挑选的在线 CSS3 代码生成工具

    今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效.CSS3 是对 CSS 规范的改善和增强,增加了圆角.旋转.阴影.渐变和动画等众多强大的 ...

  8. compass模块

    Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...

  9. css3前端工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

  10. css3工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

随机推荐

  1. linux建立文件夹软连接

    linux建立文件夹软连接,并强制覆盖 ln -sfn /home/var/log/httpd/logs logs 这将在当前目录下建立logs软连接,指向/home/var/log/httpd/lo ...

  2. 一段可以清理NSArray中的空对象的代码(递归)

    - (NSArray *)clearAllNullObject{ NSMutableArray *array = [self mutableCopy]; ;i < array.count;i++ ...

  3. python学习道路(day10note)(线程,进程)

    1.计算机的发展史 看alex的博客吧,了解一下可以了 2.线程与GIL简介 #线程 #一道单一的指令的控制流,寄生在进程中 #单一进程里的多个线程是共享数据的 #多个线程涉及修改共享数据的时候需要枷 ...

  4. crontab 管理指定用户的定时任务

    创建用户定时任务文件 touch /var/spool/cron/target_user crontab -u target_user /var/spool/cron/target_user 编辑用户 ...

  5. New library for Matlab - test

    Thanks  http://www.matlabsky.com/thread-120-1-1.html Install directory $MatlabRoot\toolbox or >&g ...

  6. Python开发程序:学员管理系统(mysql)

    主题:学员管理系统 需求: 用户角色,讲师\学员, 用户登陆后根据角色不同,能做的事情不同,分别如下 讲师视图: 管理班级,可创建班级,根据学员qq号把学员加入班级 可创建指定班级的上课纪录,注意一节 ...

  7. iOS XCode启用/关闭Clang Warnings

    前言:warnings是编码中很重要的一个环节,编译器给出合理的warning能帮助开发者找到自己代码的问题,防止很多bug产生.  默认用XCode创建一个工程,会自动开启一些重要的warnings ...

  8. ios - NSTimer中target的self是强引用问题

    当控制器ViewController跳转进入控制器OneViewController中的时候开启定时器,让定时器每隔一段时间打印一次,当OneViewController dismiss的时候,控制器 ...

  9. 拥抱基于jquery.deferred的ajax,和层层嵌套回调的ajax说拜拜

    前言 在项目中,无论是维护自己的代码,还是重构他人的项目代码,看到层层嵌套,异常冗余的某个function,那时我们的内心肯定是奔溃的! 在jquery1.5版本之前,如果我们某个操作需要多个ajax ...

  10. Leetcode: Range Addition

    Assume you have an array of length n initialized with all 0's and are given k update operations. Eac ...