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 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...
随机推荐
- WPF-悬浮在底部的导航
先用Rectangle代替导航按钮,这个导航会悬浮在界面的底部,当鼠标移进导航按钮上的时候,按钮会放大,移出后恢复正常. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 ...
- 开发自己的composer包
1. 创建一个开发目录 mkdir project cd project 2. 利用composer生成一个composer.json composer init > Welcome to th ...
- Mybatis一二级缓存的理解
频繁的数据库操作是非常耗费性能的(主要是因为对于DB而言,数据是持久化在磁盘中的,因此查询操作需要通过IO,IO操作速度相比内存操作速度慢了好几个量级),尤其是对于一些相同的查询语句,完全可以 ...
- 关于使用quartz动态增删改定时任务
1. 首先, 还是喜闻乐见的导包 <dependency> <groupId>org.springframework.boot</groupId> <arti ...
- 2.4 hive创建表实例讲解
一.create table ## 员工表 create table IF NOT EXISTS default.emp( empno int, ename string, job string, m ...
- Flutter实战视频-移动电商-63.购物车_详细页显示购物车商品数量
63.购物车_详细页显示购物车商品数量 购物车的图标嵌套在statck组件里面 外层套了一个stack组件 数量我们需要用Provide 返回一个container来做样式 气泡效果,中间是个数字外面 ...
- HDU - 1272 小希的迷宫 并查集判断无向环及连通问题 树的性质
小希的迷宫 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一 ...
- Binder使用示例（转载）
转自:http://blog.csdn.net/new_abc/article/details/8097775
- 使用Spring Security控制会话
1.概述 在本文中,我们将说明Spring Security如何允许我们控制HTTP会话.此控件的范围从会话超时到启用并发会话和其他高级安全配置. 2.会话何时创建? 我们可以准确控制会话何时创建以及 ...
- Mac Apache
参考文章1 当前系统版本:Mac OS 10.11.6 一.使用 homebrew 安装 apache 停止系统自带的 apache 服务 $ sudo apachectl stop 卸载系统自带的 ...