美文网首页
【Css】border-radius 还可以这么玩

【Css】border-radius 还可以这么玩

作者: ___Jing___ | 来源:发表于2019-01-10 16:57 被阅读0次

    border-radius 表示边框圆角,经常使用,一般就是给盒子设置个圆角或是写个圆形,今天让我们来深入了解一下radius~
    先看一个图:

    不正经的形状
    看到这么一个图形,你的第一反应是不是用canvas或是svg来实现?
    那就想复杂啦~~来,让我们看看border-radius是如何帮我们的
    • 语法
      border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]
      默认值:所有元素
      适用于:所有元素
      继承性:
      动画性:每个独立属性
      计算值:每个独立属性

    • 取值
      <length>:用长度值设置对象的圆角半径长度,不允许负值
      <percentage>:用百分比设置对象的圆角半径长度,不允许负值

    • 说明
      设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数

    • 兼容性
      Firefox从13.0开始移除对-moz-的支持,仅支持标准的border-radius写法,在4.0-12.0区间,两种方式都支持。

      兼容性
    • 示例

    1. 只写一个参数,则将四个角都设置为该值
    <style>
        /* Css */
        #box{
            width:100px;
            height: 100px;
            border: 3px solid  #4caf50;
            border-radius: 20px;
        }
    </style>
    <!-- Dom 结构 -->
    <div id="box"></div>
    

    运行结果如下图


    只设置一个borderRaius
    1. 写两个参数
    <style>
        /* Css */
        #box{
            width:100px;
            height: 100px;
            border: 3px solid  #4caf50;
            border-radius: 20px 40px;
        }
    </style>
    <!-- Dom 结构 -->
    <div id="box"></div>
    

    运行结果如下图:第一个参数设置左上角和右下角,第二个参数设置右上角和左下角,是一个对角关系。


    写两个参数
    1. 写三个参数
    <style>
        /* Css */
        #box{
            width:100px;
            height: 100px;
            border: 3px solid  #4caf50;
            border-radius: 20px 40px 60px;
        }
    </style>
    <!-- Dom 结构 -->
    <div id="box"></div>
    

    当设置了三个参数的时候,第一个值表示左上角,第二个值表示右上角和左下角,第三个值表示右下角


    写三个参数
    1. 写四个参数的时候,就不解释了...

    5.设置8个参数的时候,就好玩啦~~~

    <style>
        /* Css */
        #box{
            width:100px;
            height: 100px;
            border: 3px solid  #4caf50;
            border-radius: 30px 10px 60px 20px/70px 30px 50px 10px;
        }
    </style>
    <!-- Dom 结构 -->
    <div id="box"></div>
    
    8个参数啦

    是不是感觉乱七八糟的,也没什么意思?
    来举个小栗子吧~
    为了省事,没整理代码,将就着看个意思吧~

    小栗子

    相关文章

      网友评论

          本文标题:【Css】border-radius 还可以这么玩

          本文链接:https://www.haomeiwen.com/subject/xbjarqtx.html