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. PHP 获取当天 凌晨 时间戳常用代码

    echo strtotime(date('Y-m-d')); 获取明天凌晨的时间戳代码:echo strtotime(date('Y-m-d',strtotime('+1 day'))); 附上测试代 ...

  2. webbrowser 内核切换

    修改注册表位置: [HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER ...

  3. 利用mask layer 勾View

    #define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width #define SCREEN_HEIGHT [[UIScreen main ...

  4. 浅谈Json和jsonp

    定义: JSON:是一种数据交换格式, JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议 曾经看到一个有意思的例子:JSON是地下党们用来书写和交换情报的“暗号”的话, 而JS ...

  5. spring-amqp 动态创建queue、exchange、binding

    pom.xml <!-- mq 依赖 --> <dependency> <groupId>com.rabbitmq</groupId> <arti ...

  6. css重置reset.css

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, b ...

  7. Sublime、Webstorm,还有CLI、Atom,这些开发工具的更新你清楚吗?

    APICloud App开发平台一直在不断升级开发工具库,这一年增加了众多开发工具.目的就是让开发者可以选择使用任何自己喜欢的HTML5开发工具去开发App. 那么2016年到现在,这些开发工具都有了 ...

  8. Windows Server 2008 R2组策略创建用户桌面快捷方式

    问题: 如何让所有域用户桌面有一个公司共享的快捷方式,让所有域用户直接双击就能打开公司共享. 解决办法: 1.创建一个zhuyu组织单元 ----- 在zhuyu组织单元创建一个域用户user1. 2 ...

  9. nginx 客户端不缓存header

    location ~* \.(html|htm)$ { add_header Cache-Control no-store; }

  10. length属性,length()方法和size()的方法的区别

    一.java 1.length属性是针对Java中的数组来说的,要求数组的长度可以用其length属性: 2.length()方法是针对字符串来说的,要求一个字符串的长度就要用到它的length()方 ...