前缀对应浏览器

前缀

浏览器

-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. sql2012还原sql2008备份文件语句

    --sql2012还原sql2008语句 --选择master数据库,新建查询 输入下面sql语句 --选择兼容模式(sql 2008)创建数据库db RESTORE DATABASE db FROM ...

  2. Uploadify 上传插件引起Chrome崩溃解决方法

    将Uploadify初始化代码延时加载,可解决Chrome崩溃. setTimeout(initUploadify, 60); function initUploadify() { var $Uplo ...

  3. Entity Framework 笔记（一）

    Entity Framework概述 EF是一个对象关系映射(ORM)框架,允许开发人员使用特定于域的对象关系型数据,开发人员通常不需要编写大量的数据访问代码.使用EF,开发者可以利用LINQ进行查询 ...

  4. 拖放 js

    之前被小伙伴问自己能不能写一个简单的原生的 我稍微犹豫了下  这次重新学习下拖拽的过程  分享下  参考 JavaScript高级程序设计 必要的准备 自定义事件(实现事件模型)  简单来说事件模型就 ...

  5. JavaScript_Html5_LocalStorage项目demo

    项目中localStorage实用 项目中h5本地存储的一个小实用,本意使用cookie,但发现chrome调试被禁用,便用了localStorage. 此需求是一贴吧搜索页,在新用户第一次点击搜索框 ...

  6. [deviceone开发]-viewShower和listView

    一.简介 viewshower里嵌套listview,实现复杂的列表效果. 二.效果图 三.相关下载 http://source.deviceone.net/source-detail.html?do ...

  7. iOS 代理反向传值

    在上篇博客 iOS代理协议 中,侧重解析了委托代理协议的概念等,本文将侧重于它们在开发中的应用. 假如我们有一个需求如下:界面A上面有一个button.一个label.从界面A跳转到界面B,在界面B的 ...

  8. SharePoint:WebPartPageUserException This page has encountered a critical error

    遇到如下webpart莫名错误,很常见吧.一般用户是直接删掉,知道原因的不算太多. 解决办法(Solution): Usually, This error caused by wrong entrie ...

  9. webservice简单引用

    //1.创建网站//2.新建项=>添加web服务//运行texttweb.asmx可以通过访问http://域名/webservice/texttweb.asmx来验证了//3.添加服务引用=& ...

  10. UI中一些不常用的控件UIActivityIndicatorView、UIProgressView、UISegmentedControl、UIStepper、UISwitch、UITextView、UIAlertController

    //UIActivityIndicatorView //小菊花,加载 #import "ActivityIndicatorVC.h" @interface ActivityIndi ...