zoukankan      html  css  js  c++  java
  • border-radius的参数

    border-radius的参数:

    据w3c上的官方解释,是这样子的:

    border-radius: 1-4 length|% / 1-4 length|%;
    1-4指的是radius的四个值,length和%指的是值的单位。

    border可以带四个参数分别设置四个边框(上左下右的顺序),同样的,border-radius也可以带四个参数,并且以顺时针的方向解析,上左,上右,下右,下左

    两个参数的时候,是上左和下右,上右和下左,比如.div1{border-radius: 2em 1em}

    三个参数的时候,是上左,上右和下左,下右,比如.div1{border-radius: 2em 1em 3em}

    .div1{border-radius: 2em/1em}

    那么以斜杠/分开后面的参数是怎么回事呢?是这样子的,第一个参数表示圆角的水平半径,第二个参数表示圆角的垂直半径,所以你现在就可以画一个左右不对称的圆角啦:

    实例:通过border-radius做消息数量提示

    <style>
      .circel{
         position: absolute;
        background: #21841d;
        color: #fff;
        right:-5px;
        top: -2px;
        font-weight: normal;
        line-height: 20px;
        border-radius: 100%;
        min- 20px;
        height: 20px;
        text-align: center;
        font-size: 14px
       }
    </style>
    
     <a href="" style="position:relative">待办事项<span class='circel'>6</span></a>
    

      

  • 相关阅读:
    tornado学习
    pycharm使用技巧
    k8s排查问题利器-----kubectl debug
    linux的python3 环境配置
    flink入门学习
    jenkins deploy key的使用
    通过浏览器模拟网速慢,接口block等异常情况
    curl常用语法举例
    jmeter测试双向认证https接口
    一些开发的总结
  • 原文地址:https://www.cnblogs.com/ampl/p/7992196.html
Copyright © 2011-2022 走看看