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 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...
随机推荐
- chan_ss7 呼出的时候指定使用某个CICs，或者CICs范围 的方法
Linkset one: 1-31 Incoming 33-58 Outgoing 58-63 Emergency Traffic Linkset two: 1-31 Incoming 33-58 ...
- HDU2147 kiki's game （SG表找规律）
Recently kiki has nothing to do. While she is bored, an idea appears in his mind, she just playes th ...
- 如何应用 AutoIt 修改本机的防火墙配置？（开启，关闭防火墙，添加程序信任到防火墙）
以前,公司的实施人员配置好项目之后,不同的机器之间经常性的无法建立链接,后来发现是防火墙的设置.虽然是个小问题,但是经常性的忘记这个配置. 现在,我决定把对防火墙的设置,加入到我给实施人员的配置工具中 ...
- jquery ： eval() 解析json的注意
jquery eval解析JSON中的注意点介绍 来在:http://www.jb51.net/article/40842.htm 在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: ...
- 【216】◀▶ IDL 字符串操作说明
参考:String Processing Routines —— 字符串处理函数 01 STRING 返回字符串. 02 STRCMP 比较字符串,一样返回1,不一样返回0,默认大小写敏感. ...
- MPTCP in Wireshark(转)
最新的wireshark可以直接识别出mptcp. Wireshark is a widely used network analyzer that can capture network traff ...
- Flutter实战视频-移动电商-63.购物车_详细页显示购物车商品数量
63.购物车_详细页显示购物车商品数量 购物车的图标嵌套在statck组件里面 外层套了一个stack组件 数量我们需要用Provide 返回一个container来做样式 气泡效果,中间是个数字外面 ...
- HTML中 &emsp等空格的区别
HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器.其他几种空格( )在不同浏览器中宽度各异. ...
- httpServlet，GenericServlet，Servlet源码分析
httpServlet源码: /* * Licensed to the Apache Software Foundation (ASF) under one or more * contribut ...
- 洛谷 - P1663 - 山 - 半平面交
https://www.luogu.org/problemnew/show/P1663 给定山的性状,求一个最低点可以看见所有的地方. 就是半平面交. 粘贴全家福: #include<bits/ ...