knowledge

实现具体业务

清除浮动
WAP端半像素
<img>的圆角、边框
滚动条样式
滚动条在容器外部
WAP端页面自适应图片
帧动画（逐帧动画、序列帧、序列帧动画）
等宽文字
用CSS创造三角形、梯形
单行或多行文本超出宽度则显示省略号
图标和文字并排垂直水平居中
filter滤镜
多列等高
3D按钮
翻转效果（ie10+）
复杂背景切图
实现hover之后具体效果
粘性页脚
CSS3的animation使用
繁星效果纯CSS实现
下划线
宽度自适应的<input>

清除浮动

在父级添加

 @mixin clearfix {
     *zoom: 1;

     &:after {
         content: "";
         display: table;
         clear: both;
     }
 }

触发父级BFC
1. 截断不影响时
```
 .father {
     overflow: hidden;
     _width: 100%;
 }
```
2. 父级设置float: left/right;
3. 父级设置position: absolute/fixed;

WAP端半像素

不要使用border: 0.5px，因为浏览器会把数值换算成0或1。（客户端RN可以直接用0.5，不会取整）

scale缩小一半

整个边框0.5px

 div {
     width: 宽度;
     position: relative;

     &:before {
         position: absolute;
         top: 0;
         left: 0;
         content: "";
         width: 200%;
         height: 200%;
         border: 1px solid 颜色;
         transform: scale(.5);
         transform-origin: 0 0;
         box-sizing: border-box;
     }
 }

某一边0.5px

 div {
     width: 100px;
     position: relative;

     &:before {
         position: absolute;
         top: 0;
         left: 0;
         content: "";
         width: 100%;
         height: 1px;
         border-方向: 1px solid 颜色;
         transform: scaleY(.5);
         transform-origin: 0 0;
         box-sizing: border-box;
     }
 }

CodePen demo

<meta>的viewport缩放为1/DPR，切图用DPR倍大小（CSS媒体查询方案或JS方案）。

仅适用于iOS。Android机型太复杂，bug永无止境。
border-image/background-image2像素图片，一半透明、一半目标颜色。
box-shadow。
PostCSS的postcss-write-svg。

`<img>`的圆角、边框

圆角+边框
1. PC端
  
  直接在<img>上设置border-radius、border。
2. WAP端
  
  在<img>上设置border-radius，并嵌套一层父级标签设置border-radius、border。
圆角
- PC端、WAP端
  
  直接在<img>上设置border-radius。

border-radius与某些样式配合会导致锯齿（如：CSS渐变、透明opacity、<img>）。可以用交由GPU处理来解决：transform: translateZ(0);或will-change。

滚动条样式

参考：CSS自定义浏览器滚动条样式。

WebKit：
1. ::-webkit-scrollbar：滚动条整体部分，可以设置宽度。
2. ::-webkit-scrollbar-track：滚动条轨道，可以设置背景、圆角。
3. ::-webkit-scrollbar-thumb：滑块，可以设置背景、圆角、阴影。
4. ::-webkit-scrollbar-track-piece：滚动条轨道上覆盖的一层轨道，可以设置背景、圆角。
5. ::-webkit-scrollbar-thumb:window-inactive：浏览器未被选中时的滑块（也可以用于其他伪类）。
6. ::-webkit-scrollbar-button：滚动条两端按钮，可以设置背景、圆角、阴影。
7. ::-webkit-scrollbar-corner：横竖滚动条相交的边角，可以设置背景、圆角。
8. ::-webkit-resizer：定义右下角拖动缩放节点高宽的内容。
- 一般只需要设置：
```
  &::-webkit-scrollbar {
      width: 6px;
  }
  &::-webkit-scrollbar-track {
      border-radius: 3px;
      background-color: #dac3a2;
  }
  &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: rgba(255, 231, 198, .5);
      box-shadow: inset 0 0 0 1px #dac3a2;

      &:hover {
          background-color: rgba(255, 231, 198, 1);
      }
  }
```
ie：
1. scrollbar-arrow-color: 颜色;：三角箭头的颜色。
2. scrollbar-face-color: 颜色;：立体滚动条的颜色（包括箭头部分的背景色）。
3. scrollbar-3dlight-color: 颜色;：立体滚动条亮边的颜色。
4. scrollbar-highlight-color: 颜色;：滚动条的高亮颜色（左阴影？）。
5. scrollbar-shadow-color: 颜色;：立体滚动条阴影的颜色。
6. scrollbar-darkshadow-color: 颜色;：立体滚动条外阴影的颜色。
7. scrollbar-track-color: 颜色;：立体滚动条背景颜色。
8. scrollbar-base-color: 颜色;：滚动条的基色。

设置<input>或<textarea>的placeholder的样式：选择器::placeholder {}（厂商前缀：::-webkit-input-placeholder、::-ms-input-placeholder）。

滚动条在容器外部

若设计稿的滚动条轨道不能融入背景

 <style>
   .outer {
     width: 400px;
     box-shadow: 0 0 0 1px #000;
   }
   .father1 {
     overflow-y: auto; /* 自动生成滚动条 */
     margin-right: -10px; /* 滚动条移出本容器 */
     padding-right: 10px; /* 避免滚动条不出现时容器内容移出容器。会造成有滚动条时多一个间隔 */

     max-height: 100px;
   }
   .father1::-webkit-scrollbar {
     width: 10px;
   }
   .father1::-webkit-scrollbar-track {
     background-color: rgba(0, 0, 0, .1); /* 若设计稿的滚动条轨道不能融入背景 */
   }
   .father1::-webkit-scrollbar-thumb {
     border-radius: 5px;
     background-color: rgba(0, 0, 0, .1);
   }
 </style>
 <div class="outer">
   <div class="father1">
     <div style="background: red">
       模拟内容，背景+文字
       你好你好你好你好你好你好你好你好你好你好你好你好你
       你好你好你好你好你好你好你好你好你好你好你好你好你
       你好你好你好你好你好你好你好你好你好你好你好你好你
       你好你好你好你好你好你好你好你好你好你好你好你好你
       你好你好你好你好你好你好你好你好你好你好你好你好你
     </div>
   </div>
 </div>

若设计稿的滚动条轨道融入了背景

 <style>
   .outer {
     width: 400px;
     box-shadow: 0 0 0 1px #000;
   }
   .father2 {
     overflow-y: scroll;
     margin-right: -10px;

     max-height: 100px;
   }
   .father2::-webkit-scrollbar {
     width: 10px;
   }
   .father2::-webkit-scrollbar-track {
     /*background-color: rgba(0, 0, 0, .1);*/ /* 若设计稿的滚动条轨道融入了背景 */
   }
   .father2::-webkit-scrollbar-thumb {
     border-radius: 5px;
     background-color: rgba(0, 0, 0, .1);
   }
 </style>
 <div class="outer">
   <div class="father2">
     <div style="background: red">
       模拟内容，背景+文字
       你好你好你好你好你好你好你好你好你好你好你好你好你
       你好你好你好你好你好你好你好你好你好你好你好你好你
       你好你好你好你好你好你好你好你好你好你好你好你好你
       你好你好你好你好你好你好你好你好你好你好你好你好你
       你好你好你好你好你好你好你好你好你好你好你好你好你
     </div>
   </div>
 </div>

WAP端页面自适应图片

要求：图片根据浏览器窗口变化而宽高同时等比例变化，不使用<img>（只有内容图片才使用<img>）。

宽高都用rem且雪碧图且background-position用百分比（最佳方式）：
```
 自适应图片 {
     width: 宽rem;
     height: 高rem;
     background-size: 雪碧图宽rem;
     background: url(雪碧图) 计算出x轴的百分比 计算出y轴的百分比 no-repeat;
 }
```
技术细节
1. 百分比公式： 1. `background-position-x = 小图横坐标px / ( 大图宽度px - 小图宽度px ) * 100%` 2. `background-position-y = 小图纵坐标px / ( 大图高度px - 小图高度px ) * 100%` 2. 可以用预处理语言计算： ```scss @function rem($px, $base-font-size: 20px) { @if unitless($px) { @return rem($px + 0px); } @if unit($px) != "px" { @error "rem()的参数单位必须是px或不带单位"; } // $base-font-size：切图时设计稿宽度对应的媒体查询中html的font-size 或 --rfz+px @return $px / $base-font-size + rem; } @function position-one($positon, $singleSize, $spritesSize) { @if $positon == 0 { @return 0; } @else { @return percentage($positon / ($spritesSize - $singleSize)); } } /* x轴排列雪碧图*/ @mixin sprites-x($x: 0, $width: 单图固定宽度或0, $fullWidth: 合并图宽度) { background-image: url(图片); background-position: position-one($x, $width, $fullWidth) 0; background-size: rem($fullWidth) auto; background-repeat: no-repeat; } /*/x轴排列雪碧图*/ /* y轴排列雪碧图*/ @mixin sprites-y($y: 0, $height: 单图固定高度或0, $fullHeight: 合并图高度) { background-image: url(图片); background-position: 0 position-one($y, $height, $fullHeight); background-size: auto rem($fullHeight); background-repeat: no-repeat; } /*/y轴排列雪碧图*/ /* x+y轴排列且等大雪碧图（参数：单图宽、高、x轴图片数量、y轴图片数量、图片间距）*/ @mixin sprites-xy($width, $height, $x, $y, $gap: 2) { width: rem($width); height: rem($height); background-image: url(图片前缀#{$width}x#{$height}.png); background-size: rem(($width + $gap)*$x - $gap) rem(($height + $gap)*$y - $gap); background-repeat: no-repeat; // $i：横轴；$j：纵轴 @for $j from 1 through $y { @for $i from 1 through $x { &.i-#{$j}-#{$i} { background-position: position-one(($width + $gap)*($i - 1), $width, ($width + $gap)*$x - $gap) position-one(($height + $gap)*($j - 1), $height, ($height + $gap)*$y - $gap); } } } } /*/x+y轴排列且等大雪碧图*/ ```

其他方式：

都用rem

单图

 自适应图片 {
     width: 宽rem;
     height: 高rem;
     background-size: 100%;
     background: url(单图) center center no-repeat;
 }

雪碧图

 自适应图片 {
     width: 宽rem;
     height: 高rem;
     background-size: 雪碧图宽rem;
     background: url(雪碧图) -横轴rem -纵轴rem no-repeat;
 }

background-position用rem会出现换算小数导致定位偏离问题，改用百分比可以解决偏离问题。

都用百分比

横向、纵向百分比的padding值都是以父元素的width为基础，height是以父元素的height为基础。
1. 单图
```
 自适应图片 {
     height: 0;
     width: 宽%;
     padding-bottom: 高%;
     background-size: 100%;
     background: url(单图) 0 0 no-repeat;
 }
```
2. 雪碧图
```
 自适应图片 {
     height: 0;
     width: 宽%;
     padding-bottom: 高%;
     background-size: 雪碧图宽/单图宽度*100%;
     background: url(雪碧图) 计算出x轴的百分比 计算出y轴的百分比 no-repeat;
 }
```
  缺点：只能用于空标签。
- 宽度不固定的自适应图片（<img>），图片宽度和高度按固定比例缩放
```html
1到无数个：

```
</details>

帧动画（逐帧动画、序列帧、序列帧动画）

animation-timing-function的steps（缓动函数）配合@keyframes改变雪碧图的transform/background-position（各项指标强于使用.gif）。

e.g.

```html

``` ```html

```

CodePen demo

等宽文字

不同字数的一行文字等宽。

用inline-block的元素填补间隙

 <style type="text/css">
     i {
         display: inline-block;
         *display: inline;
         *zoom: 1;
         width: 1em;
     }
 </style>

 <p>文字文字</p>
 <p>文<i></i><i></i>字</p>

用&ensp;（字体宽度1/2em）、&emsp;（字体宽度1em）填补间隙。

 <p>三个字</p>
 <p>两&emsp;个</p>

 <p>四个字的</p>
 <p>三&ensp;个&ensp;字</p>

CodePen demo

用CSS创造三角形、梯形

.triangle {
    border-width: 20px;
    border-style: dashed solid dashed dashed; /* dashed兼容ie6 */
    border-color: transparent #000 transparent transparent;
    _overflow: hidden;
    height: 0;
    width: 0;
}
.trapezoid {
    border-width: 20px;
    border-style: dashed solid dashed dashed; /* dashed兼容ie6 */
    border-color: transparent #000 transparent transparent;
    _overflow: hidden;
    height: 20px;
    width: 20px;
}

两个同样大小的三角形，第二个设置为背景色并且覆盖到第一个上面，可以模拟箭头>。

CodePen demo

单行或多行文本超出宽度则显示省略号

支持内部包含的不仅仅是字符串，也能包含标签。

e.g. 行内元素可以截断展示一部分；非行内元素只能整个展示或不展示（如：<img>、inline-block元素）。

单行

 @mixin ellipsis($boolean: true) {
     @if $boolean == true {
         _width: 100%;
     }
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

多行

 @mixin multi-ellipsis($line-height, $line) {
     line-height: $line-height;
     height: $line-height * $line;   // 或max-height: $line-height * $line; 非必须（用rem会因为小数点问题出现样式问题）
     display: block;
     display: -webkit-box;
     *display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: $line;
 }

 // rem模式
 @mixin multi-ellipsis-rem($line-height, $line) {
     line-height: rem($line-height);
     height: rem($line-height * $line);  // 或max-height: rem($line-height * $line); 非必须（用rem会因为小数点问题出现样式问题）
     display: block;
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: $line;
 }

单行或多行自动垂直居中
JS实现：溢出文本的省略

CodePen demo

图标和文字并排垂直水平居中

使用display: flex;
1. 垂直居中：align-items: center;
2. 水平居中：justify-content: center;
可以解决部分移动端WebView文字渲染无法垂直居中问题。
兼容低版本浏览器
>内容宽度、高度确定图标`position: absolute;`，用`margin-left`调整水平位置，用`top`和`margin-top`调整垂直位置（没有设置`left`或`right`的`position: absolute;`，在文档流所在的水平位置开始定位，并且不在文档流中）。 1. 图标后置 1. 水平居左 ```html
S-水平居左，图标后置-E 1
``` 2. 水平居中 ```html
S-水平居中，图标后置-E 2
``` 3. 水平居右 ```html
S-水平居右，图标后置-E 3
``` 2. 图标前置 1. 水平居左 ```html
4 S-水平居左，图标前置-E
``` 2. 水平居中 ```html

5 S-水平居中，图标前置-E

``` 3. 水平居右 ```html

6 S-水平居右，图标前置-E

``` 3. 图标前置+图标后置，水平居中 ```html

7 S-水平居中，图标前置+图标后置-E 7

``` [CodePen demo](https://codepen.io/realgeoffrey/pen/zgoyJe)

`filter`滤镜

暂时还没有兼容所有浏览器的方案。

CSS3图形特效

兼容性：除了ie10与ie11之外的基本所有主流浏览器。

高斯模糊

 .filter {
     -webkit-filter: blur(10px);
     -moz-filter: blur(10px);
     -ms-filter: blur(10px);
     filter: blur(10px);
     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* ie6~ie9 */
 }

灰度

 .filter {
     /* filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); */
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  /* ie */
     filter: gray; /* ie6~ie9 */
 }

SVG滤镜元素

兼容性：较新版本的Firefox、Chrome、Opera。

新建一个SVG文件，把滤镜方法放进去，然后CSS调用filter: url(某.svg#某id);。

高斯模糊

 <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <filter id="某id">
       <feGaussianBlur stdDeviation="10" />
     </filter>
   </defs>
 </svg>

灰度

 <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <filter id="某id">
       <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
     </filter>
   </defs>
 </svg>

 .filter {
     -webkit-filter: url(某文件.svg#某id);
     -moz-filter: url(某文件.svg#某id);
     filter: url(某文件.svg#某id);
 }

canvas

（待续）

多列等高

flex的align-items: stretch;/* 默认 */（若子项未设置高度或设为auto，则将占满整个容器的高度。）
兼容低版本浏览器
hack ```css .father { overflow: hidden; } .sons { padding-bottom: 9999px; margin-bottom: -9999px; } ```

3D按钮

参考：Buttons。

.button3d {
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;

    color: #fff;
    background-color: #a5de37;  /* 可以改为渐变背景 */
    box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);  /* 可以加一个内部阴影，制作按钮表面光泽 */
    position: relative;
    transform: translateY(0);
    transition: .3s;

    &:hover {
        background-color: #b9e563;
        box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
    }
    &:active {
        color: #8bc220;
        background-color: #a1d243;
        box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
        transform: translateY(5px);
        transition: .15s;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

CodePen demo

翻转效果（ie10+）

<style type="text/css">
  .item {
    position: relative;

    width: 宽度;
    height: 高度;
  }
  .front {
    position: relative;
    z-index: 1;

    transition: 1s;

    backface-visibility: hidden;
    transform: rotateY(0deg);
    // 或：opacity: 1;

    width: 宽度;
    height: 高度;
  }
  .back {
    position: absolute;
    top: 0;
    left: 0;

    transition: 1s;

    backface-visibility: hidden;
    transform: rotateY(180deg);
    // 或：opacity: 0;

    width: 宽度;
    height: 高度;
  }
  .item:hover .front {
    z-index: 0;

    // 或：opacity: 0;
    transform: rotateY(180deg);
  }
  .item:hover .back {
    // 或：opacity: 1;
    transform: rotateY(360deg);
  }
</style>

<div class="item">
  <div class="front">
    正面内容
  </div>
  <div class="back">
    背面内容
  </div>
</div>

CodePen demo

复杂背景切图

（背景不透明情况）背景不规则，内容贯穿背景

上下级结构

 <style type="text/css">
     .main {
         width: 宽度;
         overflow: hidden;
     }
     .top {
         background: url(背景图) 0 100% no-repeat; /* 横版背景图，分别从左到右是头部、中间、底部内容 */
         height: 高度1;
     }
     .content-3 {
         background: url(背景图) -宽度 0 repeat-y;
     }
     .content-2 {
         position: relative;
         top: -高度2;
         *zoom: 1;
     }
     .content-1 {
         position: relative;
         margin-bottom: -2*高度2;
     }
     .bottom {
         background: url(背景图) -2*宽度 0 no-repeat;
         height: 高度1;
     }
 </style>

 <div class="main">
     <div class="top"></div>
     <div class="content-3">
         <div class="content-2">
             <div class="content-1">
                 内容
             </div>
         </div>
     </div>
     <div class="bottom"></div>
 </div>

层层覆盖

 <style type="text/css">
     .main {
         width: 宽度;
     }
     .out {
         background: url(背景图) -宽度 0 repeat-y;    /* 横版背景图，分别从左到右是头部、中间、底部内容 */
     }
     .middle {
         background: url(背景图) 0 0 no-repeat;
     }
     .in {
         background: url(背景图) -2*宽度 100% no-repeat;
     }
 </style>

 <div class="main">
     <div class="out"><!-- 中间平铺的背景-->
         <div class="middle"><!-- 头部背景（覆盖中间背景）-->
             <div class="in"><!-- 底部背景（覆盖头部以及中间背景）-->
                 内容
             </div>
         </div>
     </div>
 </div>

（背景可透明情况）背景不规则，内容不贯穿背景

 <style type="text/css">
     .main {
         width: 宽度;
     }
     .top {
         background: url(背景图) 0 100% no-repeat; /* 横版背景图，分别从左到右是头部、中间、底部内容 */
         height: 高度;
     }
     .content {
         background: url(背景图) -宽度 0 repeat-y;
     }
     .bottom {
         background: url(背景图) -2*宽度 0 no-repeat;
         height: 高度;
     }
 </style>

 <div class="main">
     <div class="top"></div>
     <div class="content">
         内容
     </div>
     <div class="bottom"></div>
 </div>

实现hover之后具体效果

去除左右间隔效果

图片法：hover之后本身的背景被替换，前一个兄弟的背景被覆盖

 ul {
   overflow: hidden;

   li {
     @include left;
     margin-left: -1px;

     a {
       background: url(宽度根据li的margin-left、高度根据a的高度决定的border样式图片) 100% center no-repeat;
       display: block;

       &:hover {
         background: 背景色;
       }
     }
   }
 }

可以用box-shadow设置单边的间隔。

底部border替换父级border

用relative控制

 ul {
     height: 高度1;
     border-bottom: 高度2 solid 颜色1;
     *zoom: 1;
     /* 不能overflow: hidden; */

     &:after {
         content: "";
         display: table;
         clear: both;
     }
     li {
         width:;

         height: 高度1;
         float: left;
         _display: inline;
     }
     a {
         display: block;
         height: （高度1+高度2）;
         _position: relative;
         _bottom: -高度2;
         /* 不能有background */

         &.hover,
         &:hover {
             height: （高度1+高度2-高度3）;
             border-bottom: 高度3 solid 颜色2;
         }
     }
 }

用absolute控制

 ul {
     height: 高度1;
     border-bottom: 高度2 solid 颜色1;
     *zoom: 1;
     /* 能够overflow: hidden; */

     &:after {
         content: "";
         display: table;
         clear: both;
     }
     li {
         width: 宽度;

         height: 高度1;
         float: left;
         _display: inline;

         a {
             width: 宽度;

             position: absolute;
             height: 高度1;
             /* 可以使用background */

             &.hover,
             &:hover {
                 height: （高度1+高度2-高度3）;
                 border-bottom: 高度3 solid 颜色2;
             }
         }
     }
 }

用margin控制

 ul {
     height: 高度1;
     border-bottom: 高度2 solid 颜色1;
     *zoom: 1;
     /* 不能overflow: hidden; */

     &:after {
         content: "";
         display: table;
         clear: both;
     }
     li {
         width:;

         height: （高度1+高度2）;
         float: left;
         _display: inline;

         a {
             display: block;
             height: （高度1+高度2）;
             margin-bottom: -高度2;
             _position: relative;
             /* 不能有background */

             &.hover,
             &:hover {
                 height: （高度1+高度2-高度3）;
                 _height: （高度1+高度2）;
                 border-bottom: 高度3 solid 颜色2;
             }
         }
     }

 }

CodePen demo

粘性页脚

flex实现
兼容低版本浏览器
1. 兼容大部分情况 ```html
内容
内容

底部内容
``` [CodePen demo](https://codepen.io/realgeoffrey/pen/eqBbPP) 2. *ie6中，当.last-container高度变化时会渲染错误（每次改变高度，需要用JS给某些节点增加haslayout）* ```html
内容
内容

底部内容

``` [CodePen demo](https://codepen.io/realgeoffrey/pen/mNOaQE) >有些插件效果不能支持`html,body {height: 100%;}`。

CSS3的`animation`使用

制作帧动画

动画进行到一半取消动画（去除了相关类）或替换动画，会导致节点突兀地回到初始位置。

纯CSS触发（如：:hover）

 .dom:hover {
     animation: func 1s infinite;
 }
 @keyframes func {

 }

用JS控制启动时的动画效果和关闭时的动画效果

 <style>
     .dom.fade-in {
         animation: func-in 1s infinite;
     }
     .dom.fade-out {
         animation: func-out 1s 1;
     }
     @keyframes func-in {

     }
     @keyframes func-out {

     }
 </style>

 <div class="dom j-dom">...</div>

 <script>
     $(document).on('mouseenter', '.j-dom', function () {
         var self = $(this);

         self.removeClass('fade-out');
         setTimeout(function () {
            self.addClass('fade-in');
         }, 0);
     }).on('mouseleave', '.j-dom', function () {
         var self = $(this);

         self.removeClass('fade-in');
         setTimeout(function () {
            self.addClass('fade-out');
         }, 0);
     });
 </script>

监听动画结束事件，在结束时候再去除动画

CodePen demo

繁星效果纯CSS实现

纯色背景
1. 底下一层：繁星用切图，其他区域透明再用背景色填充。
2. 上面一层：用移动中的渐变背景色覆盖繁星。
复杂背景
1. 底下一层：移动中的渐变背景色（色值接近复杂背景颜色即可）。
2. 上面一层：把繁星镂空的复杂背景。

CodePen demo

下划线

实现文字添加下划线。

text-decoration: underline;

效果根据字体各异，无法控制展示位置，很可能无法满足设计需求。
模拟下换线：

若是模拟的下划线（非text-decoration: underline;），要注意文字换行时情况，一般只能针对display: inline;的文本进行模拟。
1. border-bottom: 1px solid;
  
  可以用padding-bottom等修改展示位置。border会受盒模型影响，如：高宽、圆角等。
2. box-shadow: 0 1px 0 0;
  
  box-shadow（非 ~~inset~~）紧贴着盒模型之外展示，会受盒模型影响，如：圆角等。
  - 可以修改第四个扩展半径的数值来达到下划线的左右缩短：box-shadow: 0 10px 0 -9px;（第二个值大于第四个值的绝对值多少就是多少像素的下划线展示）。

宽度自适应的`<input>`

实现<input>随着输入文字变化而变化其宽度。

没有设置size的<input>输入框，会固定宽度，不会随着输入变化而变化其宽度。

嵌套一层

 <template>
   <div class="m-input-1">
     <span></span>
     <input v-model="value">
   </div>
 </template>

 <script>
 export default {
   data () {
     return {
       value: ''
     }
   }
 }
 </script>

 <style lang="scss">
   .m-input-1 {
     display: inline-block;
     position: relative;

     height: 20px;
     border: 1px solid #000;

     > span {
       display: inline-block;
       height: 100%;
       min-width: 100px;
       max-width: 200px;
       white-space: nowrap;
       overflow: hidden;
       visibility: hidden;
     }

     > input {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       padding: 0;
       border: none;
     }
   }
 </style>

动态改变<input>的size

 <template>
   <input class="m-input-2" v-model="value" :size="value.length + 2">
 </template>

 <script>
 export default {
   data () {
     return {
       value: ''
     }
   }
 }
 </script>

 <style lang="scss">
   .m-input-2 {
     min-width: 100px;
     max-width: 200px;
   }
 </style>

contentEditable（缺点：输入超出的内容无法用鼠标滚动展示）

 <template>
   <div class="m-input-3" contentEditable="plaintext-only" />
   <!-- 若contentEditable="true"，则需要用JS控制仅可粘贴纯文本 -->
 </template>

 <style lang="scss">
   .m-input-3 {
     display: inline-block;
     white-space: nowrap;
     overflow: hidden;
     min-width: 100px;
     max-width: 200px;

     border: 1px solid #000;
   }
 </style>

计算输入的字数，然后动态修改<input>的宽度

CodePen demo

This site is open source. Improve this page.

knowledge

实现具体业务

目录

清除浮动

WAP端半像素

<img>的圆角、边框

滚动条样式

滚动条在容器外部

WAP端页面自适应图片

帧动画（逐帧动画、序列帧、序列帧动画）

等宽文字

用CSS创造三角形、梯形

单行或多行文本超出宽度则显示省略号

图标和文字并排垂直水平居中

filter滤镜

多列等高

3D按钮

翻转效果（ie10+）

复杂背景切图

实现hover之后具体效果

粘性页脚

CSS3的animation使用

繁星效果纯CSS实现

下划线

宽度自适应的<input>

`<img>`的圆角、边框

`filter`滤镜

CSS3的`animation`使用

宽度自适应的`<input>`