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. python学习道路(day11note)(协程,同步与异步的性能区别,url爬网页,select,RabbitMq)

    1.协程 #协程 又称微线程 是一种用户的轻量级线程 程序级别代码控制 就不用加机器 #不同函数 = 不同任务 A函数切到B函数没有进行cpu级别的切换,而是程序级别的切换就是协程 yelied #单 ...

  2. Thinkphp控制器,1.多层控制器2.多级控制器

    1.多层控制器 ThinkPHP的控制器支持多层和多级,多层指的是控制器可以分层,例如除了默认的Controller控制器层(我们可以称之为访问控制器),还可以添加事件控制器(层),例如: ├─Con ...

  3. 使用PowerShell解三道测试开发笔试题

    在网上看到了三道测试开发的笔试题,答案是用Python解的.这段时间正好在学PowerShell,练习一下:) 1. 验证邮箱格式 2. 获取URL的后缀名 3. 获取前一天时间或前一秒 我的解法是: ...

  4. 基于 debootstrap 和 busybox 构建 mini ubuntu

    基于 debootstrap 和 busybox 构建 mini ubuntu 最近的工作涉及到服务器自动安装和网络部署操作系统,然后使用 ansible 和 saltsatck 进行配置并安装 op ...

  5. 手机QQ内置网页,微信内置网页中进行分享到QQ和微信的操作

    微信内的网页分享: API内容详见微信开发文档  https://mp.weixin.qq.com/wiki 这里需要注意的是:调用微信API的时候修改的是微信内网页右上角三个点那里打开后,选择分享之 ...

  6. SpringMVC常用配置-文件上传-基于Servlet 3.0

    [2] http://www.cnblogs.com/weilu2/p/springmvc_MultipartConfigElement_tomcat_webapps_work.html

  7. jQuery ajax的traditional参数的作用///////////////////////////////////zzzzzzzzzzz

    jQuery ajax的traditional参数的作用 i33 发布时间: 2013/04/03 10:05 阅读: 9859 收藏: 9 点赞: 1 评论: 0 一般的,可能有些人在一个参数有多个 ...

  8. oracle 11g如何完全卸载

    方法/步骤   停用oracle服务:进入计算机管理,在服务中,找到oracle开头的所有服务,右击选择停止   在开始菜单中,找到Universal Installer,运行Oracle Unive ...

  9. UEditor上传图片等附件都出现红叉,该怎么解决

    ------解决方案-------------------------------------------------------- 引用: 在本地这样配置就没问题:var URL = window. ...

  10. win2012,oracle11g,sqlplus切换实例的方法

    问题环境:windows 2012 r2 64位  ,oracle 11.2.0.4,多个实例. 在这种情况下, sqlplus "/as sysdba" 默认登录的是系统后面安装 ...