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的值的时候,边框内部角不再是圆角效果。
border-radius的兼容问题的更多相关文章
- uniapp自定义顶部搜索框兼容微信小程序
zhuanzai: uniapp自定义顶部搜索框兼容微信小程序 自定义组件 navbarvue (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度 < ...
- 针对css3特性浏览器兼容 封装less
//--------------------------------------------------- // LESS Prefixer //--------------------------- ...
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- 为什么要使用sass
或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...
- CSS3:线上编辑工具及实用资料整理
an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...
- CSS3 基本知识
1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...
- 转:前端集锦:十款精心挑选的在线 CSS3 代码生成工具
今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效.CSS3 是对 CSS 规范的改善和增强,增加了圆角.旋转.阴影.渐变和动画等众多强大的 ...
- compass模块
Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...
- css3前端工具
随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...
- css3工具
随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...
随机推荐
- 重新梳理HTML基础知识
缘起 HTML(HyperText Markup Language超文本标记语言)是用于构建web页面的标记语言和通用标准.它并不是一项新的发明,因为超文本(具有超链接的文本)和标记语言(用于电子文档 ...
- Flink – Trigger,Evictor
org.apache.flink.streaming.api.windowing.triggers; Trigger public abstract class Trigger<T, W e ...
- php识别中文编码并自动转换为UTF-8
原文地址:http://www.codefans.net/articles/1272.shtml php自动识别编码,若里面有中文的话,将其转换为UTF-8就最好了,因为中文在Gbk编辑情况情况下,有 ...
- Python学习笔记 for windows 三
多重继承 继承是面向对象编程的一个重要的方式,因为通过继承,子类就可以扩展父类的功能. 哺乳类:能跑的哺乳类,能飞的哺乳类: 鸟类:能跑的鸟类,能飞的鸟类. class Animal(object): ...
- Spring 核心框架体系结构
转载:http://www.admin10000.com/document/10447.html 很多人都在用spring开发java项目,但是配置maven依赖的时候并不能明确要配置哪些spring ...
- Java反射使用技巧
1. 通过setAccessible关闭安全检查,关闭的目的不是因为访问的field/method是私有的,而且因为关闭后访问公有方法也不会再有安全检查. SomeObject someObject ...
- javascript客户端与服务器端通信
高性能的网络通信包括以下方面:选择正确的数据格式和与之匹配的传输技术. 一.数据格式 用于传输的数据格式有: 1)html,仅适用于特定场合,传输数据量大,不过它可以节省客户端的CPU周期, 2)XM ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- Android四大组件之Activity
实验内容 了解Activity的四个状态 Activity的生命周期 启动另外一个Activity 实验要求 编码实现观察Activity的生命周期函数执行过程 编码实现启动另外一个Activity ...
- PC管理端与评委云打分配合步骤及疑难问题汇编,即如何使用PC管理端的云服务管理功能
一.前期环境及数据准备 A.PC管理端主要流程 1.进入菜单 编辑/选项/服务器 界面,如下图所示,采用我官方所提供的云服务,不采用自己假设的AppWeb服务. 切记:AppWeb服务和云服务只能二选 ...