互补网网专做高品质CMS教程,所有教程均为站长亲测有效后发布。
您当前所在位置:互补网首页 > 站长学院 > DIV+CSS教程 >

利用css中border-radius属性实现圆角方法

发布时间:2021-10-20热度:0

css3圆角实现方法是(border-radius)下面对使用border-radius来画出css3正圆、css3半圆、css3四分之一圆等画法探讨测试。

image

css3圆角浏览器支持情况:IE9及其以上,火狐,谷歌等浏览器。

css3圆角的书写顺序:

border-radius:上 右 下 左 例如:border-radius:10px 4px 20px 10px;

如果四个角的弧度相同可以这样写:border-radius:6px;   

css3圆角border-radius的单位也支持百分比%

使用border-radius实现正圆的方法:

border-radius:100%;    

css3半圆的画法:

左边半圆就是高度设为宽度的一半,radius只写下和左即可 如: radius: 0 0 200px 200px;

#yuanjiaocss{

  width: 200px;

  height: 100px;

  background-color: #a72525;

  border-radius: 0 0 200px 200px;

}

具体情况大家可以自己动手试试,各种情况都试试看能画出那些类型的半圆来。

css3四分之一圆的实现方法

是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度。本例代码如下。

#quartercircle {

width: 200px;

height: 200px;

background-color: #a72525;

border-radius: 200px 0 0 0;

}


本文地址:http://www.25923.com/xuexi/divcss/1020167.html(转载请保留)