关于圆角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 ...
随机推荐
- git 常用口令
版本管理 svn git cd d 切换目录 cd www cd git git clone 一个地址 git status 获取修改的内容 git add * 上传修改的内容 git commi ...
- mysql 存储过程和游标
CREATE DEFINER=`root`@`localhost` PROCEDURE `NewProc`() BEGIN #Routine body goes here... DECLARE ite ...
- Numpy随机数(一):超几何分布
超几何分布 产品抽样检查中经常遇到一类实际问题,假定在N件产品中有M件不合格品,即不合格率 . 在产品中随机抽n件做检查,发现k件不合格品的概率为 ,k=0,1,2,...,min{n,M}. Num ...
- linux rpm 安装包制作
今天的任务是把make好的install作成rpm. 3GPP 的重要性, 不必多言 例1. unpackaged if [ -z "`ps -ef|grep kamailio.pid|gr ...
- Linux使用日志
Linux使用日志 ----------------------------------------------------------------------------- SecureCRTPor ...
- 用代码如何检测一个android程序是否在运行
/** * 检测一个android程序是否在运行 * @param context * @param PackageName * @return */ public static boolean is ...
- XNA项目基础
XNA项目基础 using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Frame ...
- VS2010,VS2012,VS2015等的自动提示不能默认选中的功能解决办法
很简单,只需要按 ctrl+alt+space 即可切换. 蛋疼,我到底为什么总会不小心切换过去,而且每次都记不住这个快捷键切换回来...
- MySQL修改提示符
MySQL提示符 \D 完整日期 \d 当前数据库 \h 服务器名称 \u 当前用户 1.连接之前修改提示符 mysql -uroot -proot --prompt [MySQL提示符] 2.连接之 ...
- BAE+Python+Django+Wechatpy+Baidu weather api +微信订阅号 = 实现微信查询天气
最近想在微信上面实现天气查询,分两个步骤: 1.被动回复:输入天气.xx天气获取天气情况 2.主动推送:每天定时推送天气(针对24小时内产生交互的人) 目前已经实现第一个步骤,如下: 现将实现此功能环 ...