一、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的更多相关文章

  1. CSS布局设置

    一 盒模型 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模 ...

  2. 9.12 h5日记

    9.12 知识点补充: 属性继承例子,color.font(font-size/style/family/weight) 1.浏览器的默认字体大小是16px,谷歌浏览器的最小字体是10px,其他浏览器 ...

  3. 【CSS3】 - 初识CSS3

    .navdemo{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; ...

  4. css特效sh

    1   opacity=0.5:                                                             透明度 2    选择器   .btn1:ho ...

  5. CSS魔法堂:重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  6. WPF 采用Border创建圆角

    通过设置可以创建圆角border的CornerRadius属性其边框呈现圆角样式 代码: <Border Height="50" Background="Red&q ...

  7. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  8. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  9. CSS 笔记——阴影、圆角、旋转、光标

    7. 阴影.圆角.旋转.光标 (1)box-shadow 阴影 基本语法 text-shadow: h-shadow v-shadow blur color; box-shadow: h-shadow ...

  10. CSS3边框与圆角

    1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 ...

随机推荐

  1. 4.1、支持向量机(SVM)

    1.二分类问题 在以前的博客中,我们介绍了用于处理二分类问题的Logistic Regression算法和用于处理多分类问题的Softmax Regression算法,典型的二分类问题,如图: 对于上 ...

  2. TX2之多线程读取视频及深度学习推理

    背景 一般在TX2上部署深度学习模型时,都是读取摄像头视频或传入视频文件进行推理,从视频中抽取帧进行目标检测等任务.对于大点的模型,推理的速度是赶不上摄像头或视频的帧率的,如果我们使用单线程进行处理, ...

  3. redis的持久化相关操纵

    一.redis数据持久化(数据保存在硬盘上) 1. 关系型数据库Mmysql持久化 任何增删改语句都是在硬盘上操作(安全) 断电,硬盘上数据还在 2.非关系型数据库 默认所有的增删改都是在内存中操作( ...

  4. BFS - 20190206

    1.二叉树 BFS 2.拓扑排序  重点 BFS 3.棋盘上的宽搜  BFS 图的遍历 层级遍历,由点及面,拓扑排序,简单图的最短路径 如果题目问最短路径:可能是BFS或者DP, 最长路径:DFS q ...

  5. 文献综述十八:基于SSH框架的进销存管理系统设计与实现

    一.基本信息 标题:基于SSH框架的进销存管理系统设计与实现 时间:2017 出版源:内蒙古科技与经济 文件分类:对框架的研究 二.研究背景 进销存管理系统在各企业中广泛应用,使用SSH框架,很大程度 ...

  6. Oracle PL/SQL编程之变量

    注: 以下测试案例所用的表均来自与scott方案,使用前,请确保该用户解锁. 1.简介 和大多数编程语言一样,在编写PL/SQL程序时,可以定义常量和变量,在pl/sql程序中包括有: a.标量类型( ...

  7. Struts中Validate()和validateXxx的使用

    Struts中Validate()和validateXxx的使用 学习struts2之后,你会发现validate在之前是没有的!它是怎么实现的呢? validate和validateXxxx都是拦截 ...

  8. redis在Linux上的安装

    1 安装redis编译的c环境 输入命令: 注意yum安装必须联网 yum install gcc-c++  如果提示是否需要下载输入y就可以开始下载. 2 redis安装 1 上传文件 2 解压文件 ...

  9. XmlReader在序列化中的使用

    和XmlDocument最大的不同——XmlReader逐行读取.单独很少使用,一般配合序列化(反序列化)使用,以下给出具体例子: namespace ConsoleApplication1 { pu ...

  10. Python基础(3) - 数据类型:5字典类型

    Python Dictionary 是 Python 的内置数据类型之一, 它定义了键和值之间一对一的关系 .它是用{}括起来的.每个Dictionary的项的句法为:key:value. Dicti ...