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对于前端工程师来说,越来 ...
随机推荐
- ajax原理和跨域解决方法
ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1--启动 ...
- selenium使用过程中遇到的“element not visiable”错误
PS:本博客selenium分类不会记载selenium打开浏览器,定位元素,操作页面元素,切换到iframe,处理alter.confirm和prompt对话框这些在网上随处可见的信息:本博客此分类 ...
- CentOS 下部署 ASP.NET Core环境
一.安装dotnet 1.下载运行环境 https://www.microsoft.com/net/download/linux 下载Runtime:https://go.microsoft.com/ ...
- C# 关键字【转】
C#中的关键字 关键字是对编译器具有特殊意义的预定义保留标识符.它们不能在程序中用作标识符,除非它们有一个 @ 前缀.例如,@if 是有效的标识符,但 if 不是,因为 if 是关键字. 下面是列 ...
- Yii入门☞应用
Yii 应用的静态结构 应用: require可以有返回值,Yii中经常返回数组用以配置.以前只知道引用文件成功返回1. controllerMap属性允许你指定一个控制器ID到任意控制器类,修改配置 ...
- object_id用法
特别是在建表建存储过程的时候进场会写到: IF OBJECT_ID('Table_Test','U') IS NOT NULL DROP TABLE Table_Test 这种方式代替了以往所使用的 ...
- Linux命令集合
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...
- Contributing to the C++ Core Guidelines
Contributing to the C++ Core Guidelines "Within C++ is a smaller, simpler, safer language strug ...
- 学习vulkan的几个有用的网址
<ignore_js_op> 1)一个权威向导网站:https://vulkan-tutorial.com/2)Imagination图形组织官网http://imgtec.eetrend ...
- mysql时间属性之时间戳和datetime之间的转换
一.datetime转换为时间戳 方案一:强制转换字段类型 use`nec`; ; ) NOT NULL COMMENT '注册时间' , ) NULL DEFAULT NULL COMMEN ...