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. Oracle数据库基础知识2

    字符操作相关_1 1.CONCAT关键字作用:连接字符串语法:CONCAT(字串1, 字串2)例如: CONCAT('hello','world') FROM DUAL; 注意:Oracle的CONC ...

  2. 读懂UI设计的心理学

    好文转载,版权归原作者 作为UI设计师,对待用户就像对待婴儿,知道如何通过界面设计诱导用户非常重要,这就需要了解心理学方面的知识了.今天分享一篇日本设计师的好文,结合心理学与设计,教你读懂心理学,提高 ...

  3. Bittorrent Protocol Specification v1.0 中文

    翻译:小马哥 日期:2004-5-22 BitTorrent 是一种分发文件的协议.它通过URL来识别内容,并且可以无缝的和web进行交互.它基于HTTP协议,它的优势是:如果有多个下载者并发的下载同 ...

  4. visual studio2015从git上clone(克隆)项目

    本文介绍Visual Studio2015从git上clone项目代码的步骤. 1.打开VS2015,进到起始页,打开"团队资源管理器",如下图: 2.点击"克隆&quo ...

  5. Net中httpResponse和httpRequest的简单实用;

    这对象很简单,封装很多常用的方法和属性:使用起来也很方便: 这个关键是要对我们的 http中的各种协议要很了解滴呀: 模拟一个简单的暴力破解: public static class HttpInfo ...

  6. nginx 配置优化(简单)

    配置文件     正常运行的必备配置:         1.user username [groupname]:(推荐nginx)         以那个用户身份运行,以在configure指定的用户 ...

  7. Docker应用程序容器技术_转

    转自:百度百科 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相 ...

  8. AngularJS 2.0

    https://angular.io/docs/ts/latest/guide/learning-angular.html QuickStart: git clone https://github.c ...

  9. JVM 内部运行线程介绍

    转(http://club.alibabatech.org/article_detail.htm?articleId=4) JVM 内部运行线程介绍 作者:蒋家佳/觉梦(支付宝开发工程师) 浏览量: ...

  10. PhpStorm 4.0 & 5.0 部署本地Web应用 (转)

    1.创建新的项目(project),创建完成之后单击工具栏的应用运行/调试(Select Run/Debug Configuration)的下拉菜单弹出 Edit Cofigurations选项,单击 ...