实现具体业务

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

更多实现可以学习：W3Schools How To。

清除浮动

在父级添加

@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. background-position-x = 小图横坐标px / ( 大图宽度px - 小图宽度px ) * 100%
2. background-position-y = 小图纵坐标px / ( 大图高度px - 小图高度px ) * 100%

可以用预处理语言计算：

@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为基础。

单图

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

雪碧图

自适应图片 {
    height: 0;
    width: 宽%;
    padding-bottom: 高%;
    background-size: 雪碧图宽/单图宽度*100%;
    background: url(雪碧图) 计算出x轴的百分比 计算出y轴的百分比 no-repeat;
}

缺点：只能用于空标签。

宽度不固定的自适应图片（<img>），图片宽度和高度按固定比例缩放

<style>
  .father {
    display: flex;
  }
  .son {
    flex-grow: 1;
    position: relative;

    margin: 1px;
  }
  .son:after {
    content: '';
    display: block;
    padding-top: 200%; /* 高度是宽度的200% */
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="father">
  1到无数个：<div class="son"><img src="//via.placeholder.com/150x300"></div>
</div>

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

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

e.g.

<style>
  .sprite1 {
    width: 300px;
    height: 300px;
    overflow: hidden;
  }
  .sprite1:after {
    content: "";
    display: block;
    width: 6000px;
    height: 300px;
    background: url(spr.png) no-repeat center;
    animation: frame1 .6s steps(20) both infinite;
    will-change: transform;
  }
  @keyframes frame1 {
    /* 触发：composite */
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-6000px);
    }
  }
</style>

<div class="sprite1"></div>

<style>
  .sprite2 {
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url(spr.png);
    animation: frame2 .6s steps(20) both infinite;
    will-change: background-position;
  }
  @keyframes frame2 {
    /* 触发：paint -> composite */
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -6000px 0;
    }
  }
</style>

<div class="sprite2"></div>

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创造三角形

border

.triangle {
    border-width: 20px;
    border-style: solid;
    border-color: transparent #000 transparent transparent;
    height: 0;
    width: 0;
}

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

梯形

.trapezoid {
    border-width: 20px;
    border-style: solid;
    border-color: transparent #000 transparent transparent;
    height: 20px;
    width: 20px;
}

linear-gradient

.triangle {
  width: 160px;
  height: 200px;
  background-repeat: no-repeat;
  background-image: linear-gradient(32deg, #f00 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, #0f0 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 100% 50%;
  background-position: top left, bottom left;
}

clip-path

.triangle3 {
  width: 160px;
  height: 200px;
  background-color: #00f;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

HTML转义字符中的三角形

<p style="color: red;">&#9658;</p>
<p style="color: orange;">&#9660;</p>
<p style="color: yellow;">&#9650;</p>
<p style="color: green;">&#8895;</p>
<p style="color: cyan;">&#9651;</p>

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

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

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;，在文档流所在的水平位置开始定位，并且不在文档流中）。

图标后置

水平居左

<style>
    .ico-r-1 {
        position: relative;
        padding-right: 100px;
        _zoom: 1;

        /* height、line-height、width、截断 */
    }
    .ico-r-1 i {
        position: absolute;
        width: 100px;
        height: 20px;
        top: 50%;
        margin-top: -10px;
        background-color: red;
    }
</style>

<div class="ico-r-1">
    S-水平居左，图标后置-E
    <i>1</i>
</div>

水平居中

<style>
    .ico-r-2 {
        text-align: center;
        position: relative;
        padding-right: 100px;
        _zoom: 1;

        /* height、line-height、width、截断 */
    }
    .ico-r-2 i {
        position: absolute;
        width: 100px;
        height: 20px;
        top: 50%;
        margin-top: -10px;
        background-color: red;
    }
</style>

<div class="ico-r-2">
    S-水平居中，图标后置-E
    <i>2</i>
</div>

水平居右

<style>
    .ico-r-3 {
        text-align: right;
        position: relative;
        padding-right: 100px;
        _zoom: 1;

        /* height、line-height、width、截断 */
    }
    .ico-r-3 i {
        position: absolute;
        width: 100px;
        height: 20px;
        top: 50%;
        margin-top: -10px;
        background-color: red;
    }
</style>

<div class="ico-r-3">
    S-水平居右，图标后置-E
    <i>3</i>
</div>

图标前置

水平居左

<style>
    .ico-l-1 {
        position: relative;
        padding-left: 100px;
        _zoom: 1;

        max-width: 文字宽度;
        _width: 文字宽度;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        /* height、line-height */
    }
    .ico-l-1 i {
        width: 100px;
        height: 20px;
        position: absolute;
        top: 50%;
        margin-top: -10px;
        margin-left: -100px;
        background-color: red;
    }
</style>

<div class="ico-l-1">
    <i>4</i>
    S-水平居左，图标前置-E
</div>

水平居中

<style>
    .ico-l-2 {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        position: relative;
        padding-left: 100px;
        font-size: ;

        max-width: 文字宽度;
        _width: 文字宽度;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        /* height、line-height */
    }
    .ico-l-2 i {
        width: 100px;
        height: 20px;
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 0;
        background-color: red;
    }
</style>

<div style="text-align: center;font-size: 0;/* width、height、其他位置设置 */">
    <div class="ico-l-2">
        <i>5</i>
        S-水平居中，图标前置-E
    </div>
</div>

水平居右

<style>
    .ico-l-3 {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        position: relative;
        padding-left: 100px;
        font-size: ;

        max-width: 文字宽度;
        _width: 文字宽度;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        /* height、line-height */
    }
    .ico-l-3 i {
        position: absolute;
        width: 100px;
        height: 20px;
        top: 50%;
        margin-top: -10px;
        left: 0;
        background-color: red;
    }
</style>

<div style="text-align: right;font-size: 0;/* width、height、其他位置设置 */">
    <div class="ico-l-3">
        <i>6</i>
        S-水平居右，图标前置-E
    </div>
</div>

图标前置+图标后置，水平居中

<style>
    .ico-l-r {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        position: relative;
        padding: 0 100px;
        font-size: ;

        max-width: 文字宽度;
        _width: 文字宽度;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        /* height、line-height */
    }
    .ico-l-r i.i-l {
        position: absolute;
        width: 100px;
        height: 20px;
        top: 50%;
        margin-top: -10px;
        left: 0;
        background-color: red;
    }
    .ico-l-r i.i-r {
        position: absolute;
        width: 100px;
        height: 20px;
        top: 50%;
        margin-top: -10px;
        right: 0;
        background-color: red;
    }
</style>

<div style="text-align: right;font-size: 0;/* width、height、其他位置设置 */">
    <div class="ico-l-r">
        <i class="i-l">7</i>
        S-水平居中，图标前置+图标后置-E
        <i class="i-r">7</i>
    </div>
</div>

CodePen demo

`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

.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实现

兼容低版本浏览器

兼容大部分情况

<style type="text/css">
    html,
    body {
        height: 100%;
    }
    .content {
        min-height: 100%;
        height: auto !important;
        _height: 100%;
    }
    .last-content {
        padding-bottom: 底部高度;
    }
    .footer {
        margin-top: -底部高度;
        height: 底部高度;
    }
</style>

<div class="content">
    内容
    <div class="last-content">内容</div>
</div>
<div class="footer">底部内容</div>

CodePen demo

ie6中，当.last-container高度变化时会渲染错误（每次改变高度，需要用JS给某些节点增加haslayout）

<style type="text/css">
    html,
    body {
        height: 100%;
    }
    .wrapper {
        position: relative;
        height: auto !important;
        min-height: 100%;
        _height: 100%;
    }
    .last-container {
        padding-bottom: 底部高度;
    }
    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        _width: 100%;
        height: 底部高度;
    }
</style>

<div class="wrapper">
    内容
    <div class="last-container">内容</div>
    <div class="footer">底部内容</div>
</div>

CodePen demo

有些插件效果不能支持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>{{ value }}</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

瀑布流

position: absolute + JS精细管理
grid
分割泳道平铺 + JS判断添加哪个泳道
flex或column

隐藏`<input type="number">`的增减按钮

<input type="number">

<style>
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type=number] {
    -moz-appearance: textfield;
  }
</style>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

实现具体业务.md

实现具体业务.md

实现具体业务

目录

清除浮动

WAP端半像素

`<img>`的圆角、边框

滚动条样式

滚动条在容器外部

WAP端页面自适应图片

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

等宽文字

用CSS创造三角形

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

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

`filter`滤镜

多列等高

3D按钮

翻转效果（ie10+）

复杂背景切图

实现hover之后具体效果

粘性页脚

CSS3的`animation`使用

繁星效果纯CSS实现

下划线

宽度自适应的`<input>`

瀑布流

隐藏`<input type="number">`的增减按钮

Files

实现具体业务.md

Latest commit

History

实现具体业务.md

File metadata and controls

实现具体业务

目录

清除浮动

WAP端半像素

<img>的圆角、边框

滚动条样式

滚动条在容器外部

WAP端页面自适应图片

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

等宽文字

用CSS创造三角形

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

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

filter滤镜

多列等高

3D按钮

翻转效果（ie10+）

复杂背景切图

实现hover之后具体效果

粘性页脚

CSS3的animation使用

繁星效果纯CSS实现

下划线

宽度自适应的<input>

瀑布流

隐藏<input type="number">的增减按钮

`<img>`的圆角、边框

`filter`滤镜

CSS3的`animation`使用

宽度自适应的`<input>`

隐藏`<input type="number">`的增减按钮