zoukankan      html  css  js  c++  java
  • 与border不得不说的故事

    1.border-radius: 50px / 100px; /* horizontal radius, vertical radius */

    which is mean to

    border-top-left-radius: 50px 100px;

    border-top-right-radius: 50px 100px;
    border-bottom-right-radius: 50px 100px;
    border-bottom-left-radius: 50px 100px;
     
     

    2.<pre>

    .arrow {

      width: 0; height: 0;
     
      border: 100px solid;
      border-color: red green blue yellow;
    }或者
    .arrow {
      width: 0; height: 0;
     
      border: 100px solid
      border-top-color: red;
      border-right-color: green;
      border-bottom-color: blue;
      border-left-color: yellow;
    }

    </pre>

     
    4
    /* 
       Speech Bubbles
       Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION
    Hi there
    */
     
    .speech-bubble {
      position: relative;
      background-color: #292929;
     
       200px;
      height: 150px;
      line-height: 150px; /* vertically center */
     
      color: white;
      text-align: center;
      border-radius: 10px;
     
      font-family: sans-serif;
    }
     
    .speech-bubble:after {
      content: '';
      position: absolute;
     
       0;
      height: 0;
     
      border: 15px solid;
    }
     
     
    /* Position the Arrow */
     
    .speech-bubble-top:after {
      border-bottom-color: #292929;
     
      left: 50%;
      bottom: 100%;
      margin-left: -15px;   
    }
    .speech-bubble-right:after {
      border-left-color: #292929;
     
      left: 100%;
      top: 50%;
      margin-top: -15px;    
    }
     
    .speech-bubble-bottom:after {
      border-top-color: #292929;
     
      top: 100%;
      left: 50%;
      margin-left: -15px;   
    }
     
    .speech-bubble-left:after {
      border-right-color: #292929;
     
      top: 50%;
      right: 100%;
      margin-top: -15px;    
    }
    
    Hi there
  • 相关阅读:
    常见的JedisConnectionException 异常
    使用jstack分析解决进程死锁问题
    微信支付(java版本)_统一下单
    使用Quartz任务调用的时候报错Based on configured schedule, the given trigger will never fire.
    什么是localStorage、sessionStorage,与cookie的区别?
    JavaScript for循环、数组高级语法
    SpringBoot集成Swagger2
    SpringMVC全局异常处理,看这一篇就够了
    SpringMVC文件上传的三种方法
    HDU 2089 不要62 数位dp
  • 原文地址:https://www.cnblogs.com/JackyKun/p/5256499.html
Copyright © 2011-2022 走看看