一、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. 实现CTF智能合约题目的环境部署

    本文章是参考一位大佬博客学来的. 智能合约题的环境主要包括两部分:一个是智能合约的部署,另一个就是监听合约事件进而发送flag的脚本. 智能合约部署 这里写的合约是指solidity合约,使用Remi ...

  2. 【Python】端口扫描脚本

    0x00   使用模块简介 1.optparse模块 选项分析器,可用来生成脚本使用说明文档,基本使用如下: import optparse #程序使用说明 usage="%prog -H ...

  3. sklearn的train_test_split

    train_test_split函数用于将矩阵随机划分为训练子集和测试子集,并返回划分好的训练集测试集样本和训练集测试集标签. 格式: X_train,X_test, y_train, y_test ...

  4. 使用Appium-Desktop捕获APP元素控件实现自动化控制

    使用Appium捕获APP的元素控件 实现自动化控制 我是用的是华为P20手机进行测试,为了映射出它的adb端口,需再去官网下载安装一个华为手机助手,然后将手机调成开发者模式,连接时选择传输文件模式. ...

  5. bundle 与 package

    bundle是Apple提供的软件安装的便捷方法. bundle为用户和开发者提供了一个简单地接口. bundle 和 package package:看起来像一个文件的目录       bundle ...

  6. nginx应用

    windows: 启动:start nginx 退出:nginx -s quit 检查配置是否正确:nginx -t -c ./conf/nginx.conf 查看是否在运行:tasklist /fi ...

  7. 快速修改数据库日志的增长修改为50M[转]

    尚未亲测..请君慎重使用.. SET NOCOUNT ON ), @sqlTotal NVARCHAR(MAX),@sqlSingle NVARCHAR(MAX),@sql NVARCHAR(MAX) ...

  8. JS实现OO机制

    一.简单原型机制介绍 继承是OO语言的标配,基本所有的语言都有继承的功能,使用继承方便对象的一些属性和方法的共享,Javascript也从其他OO语言上借鉴了这种思想,当一个函数通过"new ...

  9. Junit处理异常

    当一个被测类中有异常时,如何处理? 如:一个原始的被测类; public class UserExceptionDemo { public int age; public String name; p ...

  10. 【Lua】Lua + LWT + ExtJS构建目录树

    Lua处理后台逻辑,Lua lwt搭建后台程序,ExtJS根据后台传来的json数据构建目录树. 前台html和ExtJS代码不用多讲,直接上代码: treePanel.html <html&g ...