前缀对应浏览器

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

border-radius：

<style type="text/css">

div.circle{

    height:100px;/*与width设置一致*/

    width:100px;

    background:#9da;

    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/

    }

div.same{

    height:100px;

    width:50px;

    background:#9da;

}

.semi-circle{

    border-radius:50px 0 0 50px;

    }

.test{

    border-radius: 50% 0 0 50%;

}

</style>

<body>

<div class="circle">

</div>

<br/>

<div class="same semi-circle ">

</div>

<br/>

<div class="same test">

</div>

</body>

可见设置50%和设置50px这样的固定值还是有差别的，没研究百分比以什么为参考，所以现在不知道怎样通过百分比设置一个左半圆。

【update20170508】

对此的解释是，为一个元素的border-radius定义的百分比值，参照物是这个元素自身的尺寸。

也就是说，假如这个元素宽是60px，高是40px（border-box的尺寸），那么border-radius:50%的结果等同于border-radius:30px/20px;。

Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.

水平方向的参考的是width，垂直方向参考的是高度。

参考：

https://css-tricks.com/almanac/properties/b/border-radius/

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius?v=example

css3 border-radius的更多相关文章

  1. css3 border img 边框图片

    摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...

  2. CSS3 border属性的妙用

    .ribbon { background: #45c9c8; position: absolute; width: 75px; height: 25px; line-height: 25px; top ...

  3. 6个原则、50条秘技提高HTML5应用及网站性能

    Jatinder Mann是微软Internet Explorer产品的一名项目经理,在BUILD 2012大会上,他做了题为“提高HTML5应用和网站性能的50条秘技(50 performance ...

  4. CSS3 笔记一（Rounded Corners/Border Images/Backgrounds）

    CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...

  5. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  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% ...

  7. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

  8. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  9. CSS3：线上编辑工具及实用资料整理

    an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...

  10. CSS3 基本知识

    1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...

随机推荐

  1. Quartz任务调度器

    在使用jdk的timer时发现无法满足开发需求:即无法在指定的日期进行执行任务. 这便引入一个优秀的开源任务调度框架“quartz”.   这里加入的是quartz-1.8.6版本.Quart的官网: ...

  2. 【Spring】Spring框架之Struts2和Spring的优点

    Java Web开发使用Structs2和Spring框架的好处 今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术 ...

  3. Struts2详细教程

    Struts2详细教程:http://www.yiibai.com/struts_2/

  4. 深入理解javascript（一）

    此段文章摘自大叔的博客: 此文的目的是书写可维护的javascript代码. 最小的全局变量: JavaScript通过函数管理作用域.在函数内部声明的变量只在这个函数内部,函数外面不可用.另一方面, ...

  5. 封装Nvelocity的渲染方法

    public class CommonHelper { /// <summary> /// 用data数据填充templatename模板,渲染返回html返回 /// </summ ...

  6. EXCEL经纬度转化

    =LEFT(A1,FIND("°",A1)-1)+MID(A1,FIND("°",A1)+1,FIND(CHAR(39),A1)-1-FIND("°& ...

  7. Hosting socket.io WebSocket apps in IIS using iisnode

    In this post I explain how to configure a socket.io node.js application to use of WebSockets when ho ...

  8. gridView获得每行的值

    前台代码: <asp:GridView ID="GridView1" runat="server" DataKeyNames="ID" ...

  9. Android Studio git 版本回退到最新的版本

    1.场景 1.1 最新三次的提交 分别是:定义了一个变量k = 10 . 定义了一个变量 j = 6  . 定义了一个变量 i = 5 ; 本地仓库 和 远程仓库保持一致 1.2  我添加了一行代码 ...

  10. 通过settings.db自定义Android系统默认设置

    Android的系统设置数据存放在/data/data/com.android.providers.settings/databases/settings.db 中 数据库结构如下: 数据库中的默认数 ...