前缀对应浏览器

前缀

浏览器

-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. Close与Dispose的区别

    Close与Dispose的区别: Close 是停业整顿,停业了,可以通过公关,再重开,物还是原来的物:只是关闭而已,没有释放真正的释放资源,可以重新打开:Close是关门Dispose是破产: D ...

  2. MyBank（自助银行）系统

    光阴似箭,岁月如梭. 从开始学Java到现在学C#已快四个月了,我们学的东西越来越多了.但是虽说学到现在,都不知道有什么用?没地方表现啊. 那么今天我就来给大家说说说这些东西的用处吧. 就拿MyBan ...

  3. ArcGIS Server 开发实践之【Search类】

    开发中整理的.不足之处还请谅解! ----------------------------------------------- Class:Search 调用方式:require(["es ...

  4. 值得 Web 开发人员收藏的20个 HTML5 实例教程

    当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...

  5. HtmlAgilityPack---Html解析框架

    如果你想从一段HTML中提取出指定的标记(如:获取所有的div.获取具有指定属性的元素)如果你想编辑一段HTML,修改里面的部分元素如果你想判断一段HTML中指定元素的关系(子节点.父节点.兄弟节点. ...

  6. sass高级语法

    github地址:https://github.com/lily1010/sass/tree/master/course03 用到的sass语法是: sass --watch test.scss:te ...

  7. 为Autodesk Viewer添加自定义工具条

    如果你参加过我们近期的活动,你就会频繁的听到我们现在正在做的Autodesk Viewer大模型浏览器,这是一个不需要下载任何插件,基于WebGL技术的浏览器,可以支持几十种数据格式.同时viewer ...

  8. Android Actitity的生命周期

    新建项目,MainActivity代码如下: package com.wuyudong.lifecycle; import android.os.Bundle; import android.app. ...

  9. c中的数组与字符串

    一. 数组的基本概念 一个int类型的变量能保存一个人的年龄,如果想保存整个班的年龄呢? 1. 什么是数组 数组,从字面上看,就是一组数据的意思,没错,数组就是用来存储一组数据的 2. 数组的特点 l ...

  10. IOS contentOffset该如何理解

    contentOffset是哪个点??? 首先从字面理解:内容偏移 我可是查了词典的!!! 对于contentOffset有的时候我们会产生错误理解. 我不想在这里介绍错误的理解避免不必要的混淆. 我 ...