一、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. Maven web项目(简单的表单提交) 搭建(eclipse)

    我们将会搭建一个,基于Maven管理的,具有简单的表单提交功能的web项目,使用DAO--service--WEB三层结构,服务器使用Tomcat 1 项目基本结构的搭建 左上角File---> ...

  2. Vue项目 注释模板

    此内容只适用于vscode 1.打开项目->按快捷键->ctrl+shift+p 2.选择红线选中的内容 ,如果是中文版看如下图片 如果是英文版看如下图 3.就开始进行配置 大家根据这张图 ...

  3. redis安全(加入密码)

    一.前言 在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redis时候,最好更改默认端口, ...

  4. acl权限使用

    1.acl的设置技巧 *setfacl 用法: setfactl [-bkRd] [{-m|-x} acl参数] 目标文件名 -m:设置后续的acl参数给文件使用,不可与-x合用 -x:删除后续的ac ...

  5. pycharm入门的简易使用教程

    1.安装python3.5包: 本人安装到C盘,如下所示: Ps:安装时候,路径一定要添加到环境变量中,安装完,需要更新环境变量,所以要重启电脑 2.安装pycharm 下载相应的安装包,步骤不重复了 ...

  6. oracle使用已有vid快速新建虚拟机

    有时候需新建虚拟机,但是每一次新建都花费很多时间,这里在oracle中快速新建虚拟机,只需要复制已有的vdi,然后修改uuid即可   windows下在cmd下输入命令 cd C:\Program ...

  7. php 图片上传 并返回上传文件位置 支持多文件上传

    <?php /** * Created by PhpStorm. * User: DY040 * Date: 2018/4/26 * Time: 13:23 */ echo '<pre&g ...

  8. Idea maven编译报错 javacTask: 源发行版 1.8 需要目标发行版 1.8

    javacTask: 源发行版 1.8 需要目标发行版 1.8 [INFO] ------------------------------------------------------------- ...

  9. iview 怎样屏蔽掉账户框自动显示账户名和密码(root,***)

    用iview框架做出的登录页面,账户名和密码显示框,会自动有占位信息(root,****) 后来解决问题发现,只要在真正的输入框下面添加这样的一行隐藏的代码,占位信息会自动填充到隐藏的input框内, ...

  10. 溶解shader

    玩神界原罪2,感觉人物被建筑遮挡时,建筑的“溶解”效果很有意思,想实现一下.然后发现连溶解都没实现过,emmmmm....先来把溶解实现了~ 原理就是根据一张噪声图的值是否大于某个阈值,来判断是否丢弃 ...