CSS百问

最近更新时间：2018年3月16日15:08:21

《我的博客地图》

    当已经适应了工作状态时，时间是可以自由支配的，因此可以学习一些自己没有用到的技术汇总。

1、css实现一条有两种颜色的线条

#line{
        border-left: 50px solid red;
        border-right: 200px solid #ccc;
        height: 2px;
        width: 0;
}

2、实现对话框有向下直角小三角

    如图：

    html结构：

<div class="tag">
      <div class="rectangle">161 Regions</div>
      <div class="triangle"></div>
</div>

    css结构：

.tag{
      position:relative;
      .rectangle{
        text-align: center;
        line-height:r(50);
        width:r(176);
        height:r(50);
        border:r(1) solid #fff;
        background-color:#101829;
        color:#fff;
        position:relative;
        z-index: 1;
      }
      .triangle{
        width:r(16);
        height:r(16);
        border:r(1) solid #fff;
        border-color: transparent #fff #fff transparent;
        background-color:#101829;
        position:relative;
        top:r(-10);
        transform: rotate(45deg);//顺时针旋转45度
        z-index: 2;
        left:r(20);
      }
}

3、实现实心三角形

    把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;//三角朝上

}

4、360°无限旋转的元素

#me{
        width: 30px;
        height: auto;
        animation: rotateImg 2s linear infinite;
    }

    @keyframes rotateImg
    {
        0% { transform: rotate(0deg); } /* 顺时针 或者使用from to*/
        100% { transform: rotate(360deg); }
    }
    @-webkit-keyframes rotateImg /*Safari and Chrome*/
    {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }

    }

5、实现半圆

border-radius: 50px 0px 0 0;//左上角 右上角 右下角 左下角

扩展：

border-radius: 0px 50px;//左上角和右下角为0

border-radius: 50px 0 50px;//右上角和左下角为0

6、鼠标放在元素上，元素360°旋转，移开鼠标反向旋转360°

#me{ transition: transform 2s ease-in; }

#me:hover{ transform: rotate(360deg) }

扩展：

transition-样式过度，四个速记属性：属性名称、过度效果的时长、过度效果的速度类型、延迟（一般不写）

7、margin

合并的情况：上下取大；左右取加

未完，待续...