前缀对应浏览器

前缀

浏览器

-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. AngularJs学习第一课 Hello World

    首先先介绍一下:AngularJS是干什么的. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了 ...

  2. WPF钟表效果实现

    WPF在样式定义和UI动画上面相对于以前的技术有了不少的提升,下面给出WPF技术实现钟表的效果: 1.Visual Studio新建一个WPF应用程序,命名为WpfClock,新建一个images文件 ...

  3. Mysql一些复杂的语句

    1.查找重复的行 SELECT * FROM blog_user_relation a WHERE (a.account_instance_id,a.follow_account_instance_i ...

  4. 详细解读XMLHttpRequest（二）响应属性、二进制数据、监测上传下载进度

    本文主要参考:MDN 分析并操作 responseXML属性 如果你使用 XMLHttpRequest 来获得一个远程的 XML 文档的内容,responseXML 属性将会是一个由 XML 文档解析 ...

  5. 好文要顶之 --- 简单粗暴地理解 JavaScript 原型链

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  6. Swift安装

    Server1 .Update sudo apt-get update sudo apt-get upgrade . sudo apt-get install bridge-utils .IP 3.1 ...

  7. 转：jQuery.data

    原文地址:http://www.it165.net/pro/html/201404/11922.html 内存泄露 首先看看什么是内存泄露,这里直接拿来Aaron中的这部分来说明什么是内存泄露,内存泄 ...

  8. java使用动态代理来实现AOP（日志记录）

    以下内容为原创,转载时请注明链接地址:http://www.cnblogs.com/tiantianbyconan/p/3336627.html AOP(面向方面)的思想,就是把项目共同的那部分功能分 ...

  9. Android 手机卫士--九宫格使用

    本文地址:http://www.cnblogs.com/wuyudong/p/5907736.html,转载请注明源地址. 采用GridView来实现,和ListView使用方式类似,列数(3列) 首 ...

  10. commandline (命令行)登录mysql

    mysql登录在命令行登录的时候是通过mysql的里面的程序的录的 其登录格式有两种:(在oracle上看到的是列出这两种,不要既有全参数名又有缩写参数名.) 1.全参数名登录释例 mysql --h ...