关于圆角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 ...
随机推荐
- jquery实现简易的计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 做开发,你少不了的淘宝镜像之--maven镜像
maven阿里云中央仓库 修改maven根目录下的conf文件夹中的settings.xml文件,内容如下: <mirrors> <mirror> <id ...
- Kettle 行列互换之——行转列(多列数据合并成一列变为多行)
原始需求如下: 业务系统设置成这样,见截图. 工资项目为了方便录入,都是做成列的. 但是这些数据需要和另外的费用报销系统的数据关联,费用报销系统的费用项目是横向的,用费用项目.金额的多行来表达.那么这 ...
- [HDU4089]Activation(概率DP)
HDU4089 题意:有n个人排队等着在官网上激活游戏.Tomato排在第m个. 对于队列中的第一个人.有一下情况: 1.激活失败,留在队列中等待下一次激活(概率为p1) 2.失去连接,出队列,然后排 ...
- 2019 CCPC-Wannafly Winter Camp Day2(Div2, onsite)
solve 4/11 A Erase Numbers II Code:KK Thinking :KK 用ans表示当前最优答案,maxx表示遍历到的最大数字,一开始ans肯定等于a[ 1 ]+a[ 2 ...
- BZOJ - 3166 可持久化Trie 维护次大区间
题意:给出\(a[1...n]\),找出一个连续区间\(a[l...r],r>l\),令该区间的次大值为\(a_k\),使得\(a_k⊕a_i,l≤i≤r\)最大,输出全局最优解 (这题意有点别 ...
- my.工坊_ZZ
1.查了下,可以将 考古升上去,但是 还是使用 2级的考古技能,这样比较赚,高级的反而不赚.但是看到有人说 考古升到 3/4 不能再用 洛阳铲 了. 于是有了两种情况,我暂定的做法:先将 考古升到2级 ...
- U盘拷贝大文件提示文件过大无法拷贝解决方案
工具: 计算机 windows操作系统 U盘 原因:由于U盘的格式问题导致的,当期的磁盘格式是FAT32类型的,无拷贝过大的文件 方法:接下来修改U盘类型,且不格式化U盘 1.键盘win+R快捷键弹出 ...
- (转)python collections模块详解
python collections模块详解 原文:http://www.cnblogs.com/dahu-daqing/p/7040490.html 1.模块简介 collections包含了一些特 ...
- 014-CallbackServlet代码
package ${enclosing_package}; import java.io.IOException; import java.util.ResourceBundle; import ja ...