关于圆角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 ...
 
随机推荐
- 《Fixed Income Portfolio Analytics》阅读笔记——第零部分
			
<Fixed Income Portfolio Analytics>第零部分的思维导图. <Fixed Income Portfolio Analytics>阅读笔记--第零部 ...
 - poi操作Excel并修改单元格背景色
			
废话不多说,直接来代码!!! 其中标红的才是重点!!! 代码中有时可以不用创建新文件, 如果报错的话可以通过创建新文件来进行操作(懒,没去找报错原因),不过原文件也会被修改. 操作之前做好备份!操作之 ...
 - yield return 的使用方法
			
以下代码,返回List,list内容为大于60的项 public Form1() { InitializeComponent(); } private void Form1_Load(object s ...
 - GCC 7.3.0版本编译http-parser-2.1问题
			
http-paser是一个用c编写的http消息解析器,地址:https://github.com/nodejs/http-parser,目前版本2.9 今天用gcc 7.3.0编译其2.1版本时,编 ...
 - hive Data Types
			
在文章最开始,就先强调一下,hive不是仅仅支持string类型,hive不是仅仅支持string类型,hive不是仅仅支持string类型. Numeric Types tinyint,-128到1 ...
 - CSAPP阅读笔记-数组分配与访问-来自第三章3.8的笔记-P176-P183
			
这一节比较简单,仅记录几个比较重要的点: 1.C语言允许对指针进行运算,计算出的值会根据该指针引用的数据类型大小进行伸缩. 例子: 其中,xE是数组的起始地址.注意,指针运算时,若最终结果为指针,则指 ...
 - spring异常被吞的一种情形
			
你是否遇到过下面的情况,控制台无限的输出下面的日志: Logging initialized using ‘class org.apache.ibatis.logging.log4j.Log4jImp ...
 - GIT 恢复单个文件到历史版本
			
首先查看该文件的历史版本信息:git log <file> 恢复该文件到某个历史版本:git reset 版本号 <file> 检出改文件到工作区:git checkout - ...
 - Android Studio修改程序包名
			
我也是在网上看到的,并且这个方法只能这么修改:cn.example.xxx修改为cn.example.yyy ,修改到根目录下... refactor---rename修改 然后clean,buil ...
 - Bootstrap使用模态框modal实现表单提交弹出框
			
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...