css3实现边框圆角样式
基本语法:
border-radius: 5px;
兼容大多数浏览器:
/*兼容Mozilla(Firefox, Flock等浏览器)*/
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
/*兼容WebKit (Safari, Chrome等浏览器)*/
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
/*兼容Opera浏览器*/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
关于IE:
IE9 以下版本不支持 border-radius,而且 IE9 没有私有格式,都是用 border-radius,其写法和 Opera 是一样的
参考文章:
css3 boder-radius实现边框圆角(http://www.studyofnet.com/news/276.html)
css3实现边框圆角样式的更多相关文章
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- css3(border-radius)边框圆角详解(转)
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
- css3(border-radius)边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
- CSS3: border-radius边框圆角详解
border-radius 基本语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 取值范围: <l ...
- CSS border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- css3如何实现圆角边框
圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...
随机推荐
- JS判断是否来自手机移动端的访问,并跳转
var browserName_ = navigator.userAgent ; &&browserName_.indexOf(&&browserName_.index ...
- LeetCode 【47. Permutations II】
Given a collection of numbers that might contain duplicates, return all possible unique permutations ...
- LeetCode【217. Contains Duplicate】
Given an array of integers, find if the array contains any duplicates. Your function should return t ...
- HTML5 history新特性pushState、replaceState,popstate
http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/ ...
- C#操作Word的辅助类(word2003) 修改完善版
转自:http://blog.csdn.net/jiutao_tang/article/details/6567608 该类在他人编写的几个类基础上扩展完善而来,主要功能有: (1)插入文本 (2)插 ...
- [MySql] - 开启外部访问
打开 mysql 的查询窗口(使用root),使用SQL: -- 使用mysql库 use mysql; -- 更新密码 update user set password=PASSWORD('xxxx ...
- UE用法
ueditor去除自动转换 ueditor在使用中发现很多问题.比如自动添加P标签,自动去除span,自动给li添加ul开始结束,自动把div转成P标签等等. 其实很多在百度上可以找到.这里总结下, ...
- oracle远程连接太慢
场景:Oracle11G DB服务器上用sqlplus直接连很快(秒连),但加上服务名后却半天没反应.一台正式.一台测试都出现此问题. sqlplus:xnwz/xnwz 很快 sqlplus:xnw ...
- activiti自定义流程之整合(五):启动流程时获取自定义表单
流程定义部署之后,自然就是流程定义列表了,但和前一节一样的是,这里也是和之前单独的activiti没什么区别,因此也不多说.我们先看看列表页面以及对应的代码,然后在一步步说明点击启动按钮时如何调用自定 ...
- smarty3与2的差异导致的小问题
又是一天看视频~ 今天在PHP100上学习smartY教程,视频中讲到了在模板文件中直接写带有“{}”JAVASCRIPT脚本会报错,我照视频上的代码写了下来,如下: <script> f ...