关于圆角border-radius
一、border-radius 可以同时设置1-4个值
a)1个值 控制4个圆角
b)2个值 第1个控制左上角和右下角 第2个值控制左下角和右上角
c)3个值 第1个控制 第2个值控制左下角和右上角 第三个值控制右下角
d)4个值 依次控制4个圆角(从左上角 到 左下角)
单个圆角的设置:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
注意早期火狐单个圆角设置
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
二、斜杠可以分别控制水平半径和垂直半径
border-radius: 5px / 10px;

三、浏览器兼容
a)ie9 及以上可兼容(低版本可用js控制,参照http://bbs.blueidea.com/viewthread.php?tid=2880214&page=1&authorid=434259)
低版建议用圆角图片
b)早期版本chrome,safary 支持-webkit-border-radius
c)早期firefox 支持 -moz-border-radius
照顾兼容
-moz-border-radius: 5px;
border-radius: 5px; // border-radius 必须放在最后声明,否则可能失效
注意: 每个圆角边框尽量设置一样的值,避免使用百分比
关于圆角border-radius的更多相关文章
- CSS布局设置
一 盒模型 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模 ...
- 9.12 h5日记
9.12 知识点补充: 属性继承例子,color.font(font-size/style/family/weight) 1.浏览器的默认字体大小是16px,谷歌浏览器的最小字体是10px,其他浏览器 ...
- 【CSS3】 - 初识CSS3
.navdemo{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; ...
- css特效sh
1 opacity=0.5: 透明度 2 选择器 .btn1:ho ...
- CSS魔法堂:重拾Border之——不仅仅是圆角
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- WPF 采用Border创建圆角
通过设置可以创建圆角border的CornerRadius属性其边框呈现圆角样式 代码: <Border Height="50" Background="Red&q ...
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- CSS3学习之圆角box-shadow,阴影border-radius
最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css expression有争议的地方,对png24图片的处理也是用滤镜,类似( ...
- CSS 笔记——阴影、圆角、旋转、光标
7. 阴影.圆角.旋转.光标 (1)box-shadow 阴影 基本语法 text-shadow: h-shadow v-shadow blur color; box-shadow: h-shadow ...
- CSS3边框与圆角
1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 ...
随机推荐
- docker搭建tomcat环境
1.拉取镜像 docker pull tomcat 2.运行容器 docker run --name tomcat -p : -v /data/tomcat/test:/usr/local/tomca ...
- json操作相关记录
json是javascript衍生的数据表示法,现在许多数据的处理都使用json. 平时用到的与json结构相似的有很多,如mongodb数据库,python的字典等.核心思想就是键值对. json的 ...
- Hangfire项目
什么是Hangfire Hangfire 是一个开源的.NET任务调度框架,目前1.6+版本已支持.NET Core.个人认为它最大特点在于内置提供集成化的控制台,方便后台查看及监控: 另外,Hang ...
- Ubuntu no such file or directory
在运行可执行程序时,报错如上,检查步骤: 1.程序是否和Ubuntu版本位数一致. Linux系统查看:uname -a 程序版本查看:file <filename> 2.查看文件是否有可 ...
- TreeSet和TreeMap不能存放重复元素?能不能存放null?
问题一:本来认为TreeMap不能存放重复元素?其实并非如此: 其实一般情况下是不允许存放重复元素的,但是它并非这么死板,在一些情况下是可以存放重复元素的,存了又会有引入其他问题. 问题二:能不能存放 ...
- orcale 之函数
我们知道存储过程的调用是一条 PL/SQL 语句.那么对于一些表达式我们用什么呢?这里函数的功能就会体现出来了. 函数和过程在创建方式上有很多的类似地方,也是编译后放入内存中以供用户使用,只不过函数调 ...
- unity小地图上的动态图标
unity制作小地图简单,用rawImage 再来个摄像机就行 但是现在一个需求就是地图上一些东西要加上图标,图标会随着地图物体的移动而移动 然后去网上下载了个小地图插件 UGUI MiniMap( ...
- python中lambda,map,reduce,filter,zip函数
函数式编程 函数式编程(Functional Programming)或者函数程序设计,又称泛函编程,是一种编程范型,它将计算机运算视为数学上的函数计算,并且避免使用程序状态以及易变对象.简单来讲,函 ...
- IE678下,select 诡异的样式
我没有IE6,我用IE5测试的. IE5下的测试结果:貌似只能设置 width ,设置其他的都失效,连 height 都不例外. IE7下的测试结果:垂直居中失效.边框失效,宽高生效. IE8下的测试 ...
- javah找不到类文件
这样即可,在src目录下寻找类,类要写全,即包名.类名