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 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...
随机推荐
- android项目源码
[置顶] Android精品开源项目整理_V20140221(持续更新中..) 让我们回顾下2013年有哪些精品资源:Android精品开源项目整理_V20131115(持续更新中..) 引言: ...
- javascript 前段MVVM 框架
http://www.likebin.net/meteorlist.html http://www.cnblogs.com/sskyy/p/3197917.html
- Python_XML的三种解析方法
什么是XML? XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. XML是一套定义语义标记的规则,这些标记将文档分成许多部件并对这 ...
- MongoDB -- 安装(win 10)
1. 下载安装包: mongodb-win32-x86_64-2008plus-ssl-4.0.10-signed.msi https://www.mongodb.com/download-cente ...
- C. Pearls in a Row
C. Pearls in a Row time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- 3-C++程序的结构1.2
对象的生存周期 可以分为静态生存周期和动态生存周期 1.静态生存周期 如果对象的生存期与程序的运行期相同,我们称它具有静态生存期.在文件作用域中声明的对象都具有静态生存期的.如果要在函数的块中声明具有 ...
- Flutter实战视频-移动电商-03.底部导航栏制作
03.底部导航栏制作 material是谷歌退出的 还有另外的一种:cupertino是IOS的风格 我们底部的导航栏,静态的widget是不合适的,这垃圾我们用到动态的widget 这重新改成动态的 ...
- POJ - 3126 Prime Path 素数筛选+BFS
Prime Path The ministers of the cabinet were quite upset by the message from the Chief of Security s ...
- mock api
模客:http://mock-api.com/ easy-mock:https://www.easy-mock.com/ easy-mock动不动就挂了,而且用起来特别卡,不知道为什么那么多人推荐-_ ...
- E20180601-hm
trade-off n. 权衡; 交易;(不是商业方面的交易,而是“利”与“弊”的权衡) vertex n. 顶点; 最高点; <数>(三角形.圆锥体等与底相对的)顶; (三角形.多边形等 ...