css3のborder-radius
css3のborder-radius
今天主要练习了一下border-radius这个属性，这个是最常用的属性，所以先从它开始学习和总结吧。
我觉得需要注意以下几点：
1.书写规范：
-webkit-border-radius-top-left 其中top left是分开写的用-来连接，而-moz-border-radius-topleft 这个topleft是连在一起写的，不要记混了。
2.简写方式：
border-radius:2em;不用多说了
border-radius:2em 3em;是指左上角=右下角=2em 右上角=左下角=3em
border-radius:2em 3em 4em;左上角=2em 右上角=3em 右下角=4em 左下角=3em
border-radius:2em 3em 4em 5em;遵循顺时针原则。。
3.特别要注意这个：水平半径≠垂直半径
border-radius:10em/5em;
水平半径：10em 垂直半径：5em;
我是怎么注意到这个的呢，说起来很有意思，第一开始，接触到border-radius，我就试着写，然后测试，代码如下：
css
.exg {
border-radius:5em 10em;
-moz-border-radius:5em 10em;
-webkit-border-radius:5em 10em;
}
html
<div class="exg wrap"></div>
结果发现谷歌的显示竟然和其他浏览器都不一样，当时就特别差异，然后我就顺藤摸瓜，最终明白了，原来是这个样子。很有意思，截图看下：
谷歌的：
火狐的：
好了，其他的大概没有了吧，那么就看看下面这个网页吧，请大家鉴赏下，亲~给好评哦！
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>border-redius</title>
<style type="text/css">
.wrap {
color: #fff;
font-family: Arial;
border: 1px solid #dfdfdf;
padding: 10px 12em;
background: #bbb;
margin-bottom: 10px;
}
h2 {
font-size: 14px;
font-weight: bold;
line-height: 24px;
}
/*水平与垂直半径相等*/
.exg_1 {
border-radius: 5em;
-moz-border-radius:5em;
-webkit-border-radius:5em;
}
.exg_2 {
border-radius: 5em 10em;
-moz-border-radius-topleft:5em;
-moz-border-radius-topright:10em;
-moz-border-radius-bottomright:10em;
-moz-border-radius-bottomleft:5em;
-webkit-border-radius-top-left:5em;
-webkit-border-radius-top-right:10em;
-webkit-border-radius-bottom-right:10em;
-webkit-border-radius-bottom-left:5em;
}
.exg_3 {
border-radius: 10em 20em 30em;
-moz-border-radius-topleft:10em;
-moz-border-radius-topright:20em;
-moz-border-radius-bottomright:30em;
-moz-border-radius-bottomleft:20em;
-webkit-border-radius-top-left:10em;
-webkit-border-radius-top-right:20em;
-webkit-border-radius-bottom-right:30em;
-webkit-border-radius-bottom-left:20em;
}
.exg_4 {
border-radius: 10em 20em 30em 40em;
-moz-border-radius-topleft:10em;
-moz-border-radius-topright:20em;
-moz-border-radius-bottomright:40em;
-moz-border-radius-bottomleft:30em;
-webkit-border-radius-top-left:10em;
-webkit-border-radius-top-right:20em;
-webkit-border-radius-bottom-right:40em;
-webkit-border-radius-bottom-left:30em;
}
/*水平与垂直半径不等*/
.exg_01 {
border-radius: 10em/5em;
-moz-border-radius:10em/5em;
-webkit-border-radius:10em/5em;
}
.exg_02 {
border-radius: 10em 20em/5em 10em;
-moz-border-radius-topleft:10em/5em;
-moz-border-radius-topright:20em/10em;
-moz-border-radius-bottomright:10em/5em;
-moz-border-radius-bottomleft:20em/10em;
-webkit-border-radius-top-left:10em/5em;
-webkit-border-radius-top-right:20em/5em;
-webkit-border-radius-bottom-right:10em/5em;
-webkit-border-radius-bottom-left:20em/5em;
}
.exg_03 {
border-radius: 10em 20em 30em/5em 10em 15em;
-moz-border-radius-topleft:10em/5em;
-moz-border-radius-topright:20em/10em;
-moz-border-radius-bottomright:30em/15em;
-moz-border-radius-bottomleft:20em/10em;
-webkit-border-radius-top-left:10em/5em;
-webkit-border-radius-top-right:20em/10em;
-webkit-border-radius-bottom-right:30em/15em;
-webkit-border-radius-bottom-left:20em/10em;
}
.exg_04 {
border-radius: 10em 20em 30em 40em/5em 10em 15em 20em;
-moz-border-radius-topleft:10em/5em;
-moz-border-radius-topright:20em/10em;
-moz-border-radius-bottomright:30em/15em;
-moz-border-radius-bottomleft:40em/20em;
}
h3 {
font-family: Arial;
font-size: 14px;
line-height: 24px;
}
ul {
font-family: Arial;
font-size: 14px;
background: #bbb;
line-height: 24px;
color: #ffffff;
padding:10px 40px;
}
p {
font-family: Arial;
text-indent: 24px;
line-height: 24px;
margin: 0;
padding:0;
}
.exg {
padding:5em;
border-radius:5em 10em;
-moz-border-radius:5em 10em;
-webkit-border-radius:5em 10em;
}
</style> </head>
<body>
<div class="exg wrap"></div>
<h2>水平与垂直半径相同</h2>
<!-- border-radius 一般写法圆角设置相同 -->
<div class="exg_1 wrap">
<h2>提供1个参数</h2>
<p>.exg_1 {</p>
<p>border-radius: 5em;</p>
<p>-moz-border-radius:5em;</p>
<p>-webkit-border-radius:5em;</p>
<p>}</p>
</div>
<div class="exg_2 wrap">
<h2>提供两个参数即:border-radius:5em 20em 5em 20em</h2>
<p>.exg_2 {</p>
<p>border-radius: 5em 10em;</p>
<p>-moz-border-radius-topleft:5em;</p>
<p>-moz-border-radius-topright:10em;</p>
<p>-moz-border-radius-bottomright:10em;</p>
<p>-moz-border-radius-bottomleft:5em;</p>
<p>-webkit-border-radius-top-left:5em;</p>
<p>-webkit-border-radius-top-right:10em;</p>
<p>-webkit-border-radius-bottom-right:10em;</p>
<p>-webkit-border-radius-bottom-left:5em;</p>
<p>}</p>
</div>
<div class="exg_3 wrap">
<h2>提供三个参数即：border-radius:10em 20em 30em 20em;</h2>
<p>.exg_3 {</p>
<p>border-radius: 10em 20em 30em;</p>
<p>-moz-border-radius-topleft:10em;</p>
<p>-moz-border-radius-topright:20em;</p>
<p>-moz-border-radius-bottomright:30em;</p>
<p>-moz-border-radius-bottomleft:20em;</p>
<p>-webkit-border-radius-top-left:10em;</p>
<p>-webkit-border-radius-top-right:20em;</p>
<p>-webkit-border-radius-bottom-right:30em;</p>
<p>-webkit-border-radius-bottom-left:20em;</p>
<p>}</p>
<p>}</p>
</div>
<div class="exg_4 wrap">
<h2>提供四个参数</h2>
<p>.exg_4 {</p>
<p>border-radius: 10em 20em 30em 40em;</p>
<p>-moz-border-radius-topleft:10em;</p>
<p>-moz-border-radius-topright:20em;</p>
<p>-moz-border-radius-bottomright:40em;</p>
<p>-moz-border-radius-bottomleft:30em;</p>
<p>-webkit-border-radius-top-left:10em;</p>
<p>-webkit-border-radius-top-right:20em;</p>
<p>-webkit-border-radius-bottom-right:40em;</p>
<p>-webkit-border-radius-bottom-left:30em;</p>
<p>}</p>
</div>
<h2>水平与垂直半径不等</h2>
<div class="exg_01 wrap">
<h2>提供1个参数:水平半径/垂直半径</h2>
<p>.exg_1 {</p>
<p>border-radius: 10em/5em;</p>
<p>-moz-border-radius:10em/5em;</p>
<p>-webkit-border-radius:10em/5em;</p>
<p>}</p>
</div>
<div class="exg_02 wrap">
<h2>提供两个参数即:border-radius:10em 20em 10em 20em/5em 10em 5em 10em</h2>
<p>.exg_2 {</p>
<p>border-radius: 10em 20em;</p>
<p>-moz-border-radius-topleft:10em/5em;</p>
<p>-moz-border-radius-topright:20em/10em;</p>
<p>-moz-border-radius-bottomright:10em/5em;</p>
<p>-moz-border-radius-bottomleft:20em/10em;</p>
<p>-webkit-border-radius-top-left:10em/5em;</p>
<p>-webkit-border-radius-top-right:20em/10em;</p>
<p>-webkit-border-radius-bottom-right:10em/5em;</p>
<p>-webkit-border-radius-bottom-left:20em/10em;</p>
<p>}</p>
</div>
<div class="exg_03 wrap">
<h2>提供三个参数即：border-radius:10em 20em 30em 20em/5em 10em 15em 10em;</h2>
<p>.exg_3 {</p>
<p>border-radius: 10em 20em 30em/5em 10em 15em;</p>
<p>-moz-border-radius-topleft:10em/5em;</p>
<p>-moz-border-radius-topright:20em/10em;</p>
<p>-moz-border-radius-bottomright:30em/15em;</p>
<p>-moz-border-radius-bottomleft:20em/10em;</p>
<p>-webkit-border-radius-top-left:10em/5em;</p>
<p>-webkit-border-radius-top-right:20em/10em;</p>
<p>-webkit-border-radius-bottom-right:30em/15em;</p>
<p>-webkit-border-radius-bottom-left:20em/10em;</p>
<p>}</p>
<p>}</p>
</div>
<div class="exg_04 wrap">
<h2>提供四个参数</h2>
<p>.exg_4 {</p>
<p>border-radius: 10em 20em 30em 40em/5em 10em 15em 20em;</p>
<p>-moz-border-radius-topleft:10em/5em;</p>
<p>-moz-border-radius-topright:20em/10em;</p>
<p>-moz-border-radius-bottomright:40em/20em;</p>
<p>-moz-border-radius-bottomleft:30em/15em;</p>
<p>-webkit-border-radius-top-left:10em/5em;</p>
<p>-webkit-border-radius-top-right:20em/10em;</p>
<p>-webkit-border-radius-bottom-right:40em/20em;</p>
<p>-webkit-border-radius-bottom-left:30em/15em;</p>
<p>}</p>
</div>
<div class="border_radius_message">
<ul>
<li>border-radius:长度</li>
<li>Firefox支持border-radius(圆角)：-moz-border-radius:2px;</li>
<li>webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:2px;</li>
<li>Opera支持border-radius(圆角)：box-shadow:2px;</li>
<li>IE不支持Box Shadow(阴影)</li>
</ul>
<h3>我们还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera（css3）、中的具体书写格式如下：</h3>
<ul>
<li>-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius</li>
<li>-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius</li>
<li>-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius</li>
<li>-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius</li>
</ul>
<h3>border-radius(圆角)还有其他一些用法，Firefox、webkit内核的Safari和Chrome和opera（css3）其他写法有些略微的差异，具体可以查看以下网址： </h3>
<p>
<a href="https://developer.mozilla.org/en/CSS:-moz-border-radius" target="_blank">https://developer.mozilla.org/en/CSS:-moz-border-radius</a>
</p>
<p>
<a href="http://www.the-art-of-web.com/css/border-radius/" target="_blank">http://www.the-art-of-web.com/css/border-radius/</a>
</p>
<p>
<a href="http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/" target="_blank">http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/</a>
</p>
</div> </body>
</html>
欢迎大家补充，不足之处，请大家不吝指点，小女子在此有礼了~
css3のborder-radius的更多相关文章
- css3 border img 边框图片
摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...
- CSS3 border属性的妙用
.ribbon { background: #45c9c8; position: absolute; width: 75px; height: 25px; line-height: 25px; top ...
- 6个原则、50条秘技提高HTML5应用及网站性能
Jatinder Mann是微软Internet Explorer产品的一名项目经理,在BUILD 2012大会上,他做了题为“提高HTML5应用和网站性能的50条秘技(50 performance ...
- CSS3 笔记一（Rounded Corners/Border Images/Backgrounds）
CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...
- 为 Web 设计师准备的 20 款 CSS3 工具
1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...
- [css]需警惕CSS3属性的书写顺序
转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...
- 针对css3特性浏览器兼容 封装less
//--------------------------------------------------- // LESS Prefixer //--------------------------- ...
- 重温CSS：Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- CSS3：线上编辑工具及实用资料整理
an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...
- CSS3 基本知识
1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...
随机推荐
- 机器学习 ： 高斯混合模型及EM算法
Mixtures of Gaussian 这一讲,我们讨论利用EM (Expectation-Maximization)做概率密度的估计.假设我们有一组训练样本x(1),x(2),...x(m),因为 ...
- 一个轻量级AOP的实现（开源）
事先声明,本项目参考AOP in C#和园内大神张逸的文章,思路神马的都不是自己的! 为了让项目的代码看起来更干净,需要一个AOP! 于是就实现了一个非常简单的,非常轻量级,有多轻量级呢? 实现的AO ...
- CF 809D Hitchhiking in the Baltic States——splay+dp
题目:http://codeforces.com/contest/809/problem/D 如果值是固定的,新加入一个值,可以让第一个值大于它的那个长度的值等于它. 如今值是一段区间,就对区间内的d ...
- read,write,accept,connect 超时封装
//read操作加上超时时间. 1 int read_timeout(int fd, void *buf, uint32_t count, int time) { ) { fd_set rSet; F ...
- c++ primer 5th学习时间轴[ 100% ]
学习参考: 1.Mooophy/Cpp-Primer. GitHub上star最多的一个答案,英文版,但是编程用到的单词也不多,查查就懂了.但是到第IV部分,很多题目的没有答案,或者不完整. 2.hu ...
- .Net框架中的CLR，CTS，ClS的解释
CLR的全称(Common Language Runtime) 公共语言运行时 可以把它理解为包含运行.Net程序的引擎 和 一堆符合公用语言基础(CLI)的类库的集合,他是一个规范的实现,我们开发的 ...
- CF-831C
C. Jury Marks time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- UVaLive 3695 City Game (扫描线)
题意:给定m*n的矩阵,有的是空地有的是墙,找出一个面积最大的子矩阵. 析:如果暴力,一定会超时的.我们可以使用扫描线,up[i][j] 表示从(i, j)向上可以到达的最高高度,left[i][j] ...
- Visual Studio 2010下WorldWind编译问题集合
首先:获取WORLDWIND最新代码——建议不要直接下载源代码包进行编译,一是因为它并不是最新版本的代码,WW的代码最近经常更新:二是缺很多依赖的类库.建议用TortoiseSVN客户端从source ...
- Flex AIR操作文件系统
1.各种文件操作http://blog.csdn.net/zdingxin/article/details/6635376 2.file.browseForDirectory("请选择一个目 ...