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 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...
随机推荐
- numpy.argmax 用在求解混淆矩阵用
numpy.argmax numpy.argmax(a, axis=None, out=None)[source] Returns the indices of the maximum values ...
- cygwin Could not create directory '/home/Administrator/.ssh'
在cygwin下运行: ssh-keygen -C "634772208@qq.com" -t rsa 时,出现如下错误: cygwin Could not create dire ...
- js的一些刷新功能
<a href="javascript:location.replace(location.href);" title="刷新"> </a&g ...
- office2007下载地址
thunder://QUFodHRwOi8vNDYuZHVvdGUub3JnOjgwODAvb2ZmaWNlMjAwN3Byby56aXBaWg==thunder://QUFodHRwOi8vNTEu ...
- C++11: Multi-core Programming – PPL Parallel Aggregation Explained
https://katyscode.wordpress.com/2013/08/17/c11-multi-core-programming-ppl-parallel-aggregation-expla ...
- 16-CoreData之多表关联（存储自定义数据模型）
多表关联 1.1-简介 什么是多表关联 在处理数据库的关系中,无非只有三种关系 一对一:一个老师只能在一个教室上课,不可能同时在两个教室上课 一对多:一个教室可以有多个学生,但一个学生只能在一个教室 ...
- GitHub使用方法（初级）
[初识Github] Git 是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理.在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中.目 ...
- 【微服务】Dubbo初体验
一.前言 之前微服务这块只用过SpringCloud搭建,但是最近面试会被问到dubbo框架,虽然之前也学了但是都忘了,故写此博客加深印象. 二.原理简介 Dubbo是一个分布式服务框架,以及阿里巴巴 ...
- JavaSE 帮助文档下载
- 51nod 1562 玻璃切割 (set)
#include<stdio.h> #include<iostream> #include<set> using namespace std; typedef lo ...