知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    css3圆角实现方法(border-radius)

    作者:佳明妈 来源:jquery插件 2015-07-05 人气:
    css3圆角实现方法是(border-radius),css3半圆的画法、css3四分之一圆的实现方法是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度。本例代码如下。
    css3圆角实现方法是(border-radius)下面对使用border-radius来画出css3正圆、css3半圆、css3四分之一圆等画法探讨测试。
    css3圆角浏览器支持情况:IE9及其以上,火狐,谷歌等浏览器。
    css3圆角浏览器兼容情况

    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;
    #quartercircle{
      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;

    }


    ↓ 查看全文

    css3圆角实现方法(border-radius)由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    css3圆角实现方法(border-radius)-最新评论