zoukankan      html  css  js  c++  java
  • 大厂前端推荐纯css实现气泡效果

    效果图:

     主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性

    css代码:

    div.bubble{
      position: absolute;
      margin: 0;
      padding: 0;
      color: #86181d;
      background-color: #ffdce0;
      border-color: #cea0a5;
      display:block;
      border:1px solid;
      border-radius: 4px;
      padding: 2px;
    }
    div.bubble::before{
      content: ' ';
      display: block;
      border-right:7px solid #ffdce0;
      border-left:7px solid  transparent;
      border-top:7px solid  transparent;
      border-bottom: 7px solid transparent;
       0px;
      height: 0px;
      position: absolute;
      top:4px;
      left:-14px;
      z-index: 3;
    }
    div.bubble::after{
      content: ' ';
      display: block;
      border-right:8px solid #86181d;
      border-left:8px solid  transparent;
      border-top:8px solid  transparent;
      border-bottom: 8px solid transparent;
       0px;
      height: 0px;
      position: absolute;
      top:3px;
      left:-16.5px;
      z-index: 2;
    }
    

    字由https://www.wode007.com/sites/73248.html 中国字体设计网https://www.wode007.com/sites/73245.html

    1. 将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形;

    2. 利用伪元素after和before,可以不用另外创建子元素,这可以避免不必要的dom复杂性

    3. 用两个border设置的三角形,一大一小,可以模拟边框的效果

  • 相关阅读:
    两个栈实现队列
    重建二叉树
    最大的K个数
    堆排序
    Android 强制竖屏
    屏蔽输入框的焦点
    Android 全屏显示的方法(不包含状态栏)
    android 布局之scrollview
    clean之后R文件消失
    thinkphp
  • 原文地址:https://www.cnblogs.com/ypppt/p/13332230.html
Copyright © 2011-2022 走看看