时间:2021-05-08
Border-radius
border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。
CSS Code复制内容到剪贴板等价于:
CSS Code复制内容到剪贴板如何使用border-radius属性
下面是border-radius属性最基本的使用方法。
CSS Code复制内容到剪贴板1.用border-radius画圆
实心圆
如图,是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等,并且把border的宽度设为高度和宽度的一半。代码如下。
CSS Code复制内容到剪贴板空心圆
通过border-radius属性画空心圆和画实心圆的方法差不多,只是border的宽度只能小于高度和宽度的一半。代码如下。
CSS Code复制内容到剪贴板虚线圆
2.半圆和四分之一圆
半圆
以本例来讲,半圆的画法是把宽度设为高度的一半,并且也只设置左上角和左下角的半径。代码如下。
CSS Code复制内容到剪贴板四分之一圆
四分之一圆的实现方法是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度。本例代码如下。
CSS Code复制内容到剪贴板更多玩法
看了这么多实例后,你完全可以自己创造更多玩法,如:
虚线的半圆和四分之一圆。
配合position属性做一个月亮。
配合position、RGBa和z-index这些属性做一个本文开头的色彩维恩图。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在CSS3中,Border-radius属性用来设置边框的圆角。是CSS3中级别最高的一个属性。-webkit-border-radius:4px;-moz-b
border-radius:CSS3圆角语法:border-radius:25px;椭圆边角:语法-border-radius:xx%;或者15px/100px
前面系统总结了CSS3中Gradient和RGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都
CSS3圆形#css3-circle{width:150px;height:150px;border-radius:50%;background-color:#
让IE6,7,8支持CSS3的部分属性。今天要给大家介绍的这个htc,它可以让IE浏览器支持CSS3的border-radius、box-shadow、bord