boder-radius属性

使用border-radius属性来设置圆角半径时可以使用长度值，或者百分比值。

在给它指定百分比值时，x轴和y轴分别相对于元素的宽度和高度来计算实际值。

所以，我们可以把一个正方形的元素变成圆形，只要把圆角半径设置成**至少50%**就好。

如果两个弧线相交，那么两个轴向就会分别缩小半径，直到圆弧不再相交。
可以像以下代码中所示，画出圆形和椭圆形。

<div class="round"></div> // 圆形
<div class="round oval"></div> // 椭圆形.round {width: 300px;height: 300px;border-radius: 50%;background-color: #59f;
}
.oval {width: 600px;
}

创建胶囊

因为圆角弧线为保证不相交会自动缩小半径，而在使用长度值（而非百分比值）时，半径并不相对于元素大小，最终会得到对称的效果。

因此，在创建胶囊两头的半圆形时，我们可以故意指定一个比所需半径大的值，来得到半圆形：

.obrund {border-radius: 999em;
}

CSS-Learning | 使用border-radius创建圆形和胶囊形状（长圆形）相关推荐

如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
Android创建圆形或圆角按钮Button 真菜鸟食用
Android创建圆形或圆角按钮Button 真菜鸟食用 1.在res\drawable下创建.xml文件(我起名为round_button.xml) 你可以右击res新建Android资源文件,将R ...
随机创建圆形、三角形或者矩形类的对象，存放在数组中，并计算出每个形状的面积和周长
随机创建圆形.三角形或者矩形类的对象, 存放在数组中,并计算出每个形状的面积和周长题目要求解题思路代码形状类代码圆形类代码三角形类代码矩形类代码方法类代码运行结果题目要求随机创建 ...
在Excel 2013中创建圆形
If a workbook has macros, or needs navigation buttons, I usually create a button by inserting a roun ...
html中怎么设置页面的弧度,如何用css实现弧度圆角?三角形以及圆形
如何用css实现弧度圆角?三角形以及圆形用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; ...
[css] 不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
[css] css中的border:none和border:0px有什么区别？
[css] css中的border:none和border:0px有什么区别? none是没有边框. 0px是边框的宽度为0px. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式属性有很多可以自己去试:circle,disc,decimal ...
java border边框_简单实用的css边框属性border
本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式. 预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 borde ...

CSS-Learning | 使用border-radius创建圆形和胶囊形状（长圆形）

boder-radius属性

创建胶囊

CSS-Learning | 使用border-radius创建圆形和胶囊形状（长圆形）相关推荐

最新文章

热门文章