CSS百问

迷南。 2022-06-08 05:15 179阅读 0赞

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

[《我的博客地图》][Link 1]

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

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

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

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

如图：

![20171220120207361][]

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

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