CSS 实用技巧

打字效果

使用 attr()展示 tooltip

纯 CSS 实现核算清单

使用关键帧实现手风琴下拉效果

毛玻璃特效

可以使用 CSS 中的 backdrop-filter 属性来实现毛玻璃特效：

.login {
    backdrop-filter: blur(5px);
}

backdrop-filter 属性可以为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

将文本设为大写或小写

大写或小写字母可以不必在 HTM 中设置。可以在 CSS 中使用 text-transform 属性来强制任何文本为大写或小写。

/* 大写 */
.upper {
    text-transform: uppercase;
}

/* 小写 */
.lower {
    text-transform: lowercase;
}

text-transform 属性专门用于控制文本的大小写，当值为 uppercase 时会将文本转为大写，当值为 capitalize 时会将文本转化为小写，当值为 capitalize 时会将每个单词以大写字母开头。

实现首字下沉

我们可以使用::first-letter 来实现文本首字母的下沉：

p.texts:first-letter {
    font-size: 200%;
    color: #8a2be2;
}

:first-letter 选择器用来指定元素第一个字母的样式，它仅适用于在块级元素中。

实现正方形

我们可以通过 CSS 中的纵横比来实现一个正方形，这样只需要设置一个宽度即可：

.square {
    background: #8a2be2;
    width: 25rem;
    aspect-ratio: 1/1;
}

aspect-ratio 媒体属性可以用来测试视口的宽高比。当然上述例子比较简单，来看看 MDN 中给出的纵横比的示例：

/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
    div {
        background: #9af; /* blue */
    }
}

/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
    div {
        background: #9ff; /* cyan */
    }
}

/* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
    div {
        background: #f9a; /* red */
    }
}

这里通过媒体查询在页面视口不同纵横比时，显示不同的背景颜色。关于纵横比，还有很多用途等着你去探索！

图片文字环绕

shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域：

.any-shape {
    width: 300px;
    float: left;
    shape-outside: circle(50%);
}

shape-outside 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

:where() 简化代码

当对多个元素应用相同的样式时，CSS 可能如下：

.parent div,
.parent .title,
.parent #article {
    color: red;
}

这样代码看起来可读性不是很好，:where() 伪类这时就派上用场了。:where() 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

上面的代码使用:where()就可以这么写：

.parent :where(div, .title, #article) {
    color: red;
}

代码是不是看起来简洁了很多？

实现平滑滚动

可以使用 CSS 的 scroll-behavior 属性来实现在网页上进行平滑滚动，而无需编写复杂的 JavaScript 或使用插件。可以用于页面锚点之间的滚动或者返回顶部等功能。

html {
    scroll-behavior: smooth;
}

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。当该属性的值为 smooth 时就可以实现页面的平滑滚动。

悬停放大

想要实现图片的悬停方法效果，使用下面的 CSS 代码即可：

img:hover {
    transform: scale(1.5);
}

transform 属性应用于元素的 2D 或 3D 转换。这个属性允许将元素旋转，缩放，移动，倾斜等。当值为 scale 就可以实现元素的 2D 缩放转换。

背景混合模式

在 CSS 中可以使用 background-blend-mode 来实现元素背景的混合：

.blend-1 {
    background-image: url(https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg);
    width: 100vw;
    height: 500px;
    background-size: cover;
}

.blend-2 {
    background-image: url(https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg);
    width: 100vw;
    height: 500px;
    background-color: #20126f;
    background-size: cover;
    background-blend-mode: overlay;
}

上面的图片是单纯的一张图片背景，下面的图片是背景图片和背景颜色混合而成的。background-blend-mode 属性就用于定义了背景层的混合模式（图片与颜色）。支持的背景混合模式：正常|乘法|屏幕|叠加|变暗|变亮|颜色减淡|饱和度|颜色|亮度；

我们可以通 CSS 中的 cursor 属性来自定义光标的样式，只需要指定自定义光标的图片路径即可：

body {
    cursor: url("path-to-image.png"), auto;
}

除此之外， cursor 还内置了很多鼠标样式供我们选择。

清除浮动

主要为子元素浮动（float）之后，父元素无法撑起高度和宽度。

<!-- html -->
<div class="clear">
    <img src="demo.gif" />
</div>

<!-- css -->
<style>
    img {
        float: left;
    }
    /* 清除浮动 */
    .clear::after {
        content: "";
        display: block;
        clear: both;
    }
</style>

文字少时居中，多时靠左

但是要注意，当 p 的内容为英文单词组成的时候，如果单词过长，而不是“ pppppppppppppppppppppppppppppp”这样的一次，会被视为一个单位而造成超过 div 的尺寸。

如果你想要英文字符也有中文字符的效果的话，在 p 使用“ word-break：break-all”。

<!-- html -->
<div class="box">
    <p class="content"></p>
</div>

<!-- css -->
<style>
    .box {
        text-align: center;
    }
    .content {
        display: inline-block;
        text-align: left;
    }
</style>

凹凸人

<!-- html -->
<div class="ao"></div>

<!-- CSS -->
<style>
    .ao {
        display: inline-block;
        width: 0;
    }
    .ao::before {
        content: "love 你 love";
        outline: 2px solid #000;
        color: #fff;
    }
</style>

让 padding，border 不影响盒模型的大小

相信这点大部分人都知道，但是有一些奇怪的行为，比如说 width<content + padding 会怎样？实际上当 padding + border> width 时，元素的渲染大小（Chrome 下）为 padding + border；而 padding + border <width 时，允许剩余空间分配给 content。

<!-- html -->
<div></div>

<!-- CSS -->
<style>
    div {
        box-sizing: border-box;
    }
</style>

身高：100％占屏效果

<!-- html -->
<div></div>

<!-- CSS方法一 -->
<style>
    html,
    body {
        height: 100%;
    }
    div {
        height: 100%;
    }
</style>
<!-- CSS方法二 -->
<style>
    div {
        position: absolute;
        height: 100%;
    }
</style>

任意高度元素展开

缺点是，如果高度太大会造成展开过快和重复中断，那么这个足够大的值应该适当。

<!-- html -->
<div></div>

<!-- CSS -->
<style>
    div {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s;
    }
    div.active {
        max-height: 666px; /* 需要足够大的值 */
    }
</style>

优雅的图片未加载或加载失败效果

需要注意的是，图片显示完成后，img 会成为“替换元素”，而替换元素是无法设置伪元素的，因为内容被图片替换掉了；还需要注意 attr 里面的变量不能加双引号。

<!-- html -->
<div>
    <img src="demo.gif" alt="lululu" />
</div>

<!-- CSS -->
<style>
    div {
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    img {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: relative;
    }
    img::after {
        /* 生成 alt 信息 */
        content: attr(alt);
        /* 尺寸和定位 */
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        /* 颜色 */
        background-color: rgba(0, 0, 0, 0.5);
        /* alt 信息隐藏 */
        transform: translateY(100%);
        /* 过渡动画效果 */
        transition: transform 0.2s;
    }
    img:hover::after {
        /* alt 信息显示 */
        transform: translateY(0);
    }
</style>

CSS 的悬浮图片替换效果

需要注意的是，如果快捷保存图片，保存的是 src 内的图片，而不是替换之后的。

<!-- html -->
<img src="demo.gif" />

<!-- CSS -->
<style>
    img:hover {
        content: url(amazing.gif);
    }
</style>

利于 seo 的“替换元素”标题 logo

用 h1 的原因主要是因为 SEO，语义化的问题。

<!-- html -->
<h1>Weismann's blog</h1>

<!-- CSS -->
<style>
    h1 {
        content: url(logo.gif);
    }
</style>

高兼容，自动等宽，底部对齐的柱状图

需要注意的是，第一个 i 不能换行，换行后会产生后移的结果

<!-- html -->
<div class="box">
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
</div>

<!-- CSS -->
<style>
    .box {
        width: 256px;
        height: 256px;
        text-align: justify;
    }
    .box:before {
        content: "";
        display: inline-block;
        height: 100%;
    }
    .box:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
    .bar {
        display: inline-block;
        width: 20px;
        /* height自定 */
    }
</style>

高兼容性的加载效果

在 IE6-IE9 下是...，其他都是动态的；使用点的目的是语义化和低版本浏览器的兼容。

<!-- html -->
正在加载中<dot>...</dot>

<!-- CSS -->
<style>
    dot {
        display: inline-block;
        height: 1em;
        line-height: 1;
        text-align: left;
        vertical-align: -0.25em;
        overflow: hidden;
    }
    dot::before {
        display: block;
        content: "...\A..\A.";
        white-space: pre-wrap;
        animation: dot 3s infinite step-start both;
    }
    @keyframes dot {
        33% {
            transform: translateY(-2em);
        }
        66% {
            transform: translateY(-1em);
        }
    }
</style>

扩大点击区域

第一种主要利用了内联元素的填充只会影响外观和不影响布局的特点；第二种针对其他属性会改变背景图定位的一种方式。

<!-- html -->
<a href="">demo</a>

<!-- CSS1 -->
<style>
    a {
        padding: 20px 0;
    }
</style>
<!-- CSS2 -->
<style>
    a {
        border: 11px solid transparent;
    }
</style>

不使用伪元素的“三道杠”和“圆点”效果

<!-- html -->
<i class="icon"></i>
<!-- CSS三道杠 -->
<style>
    .icon {
        display: inline-block;
        width: 140px;
        height: 10px;
        padding: 35px 0;
        border-top: 10px solid;
        border-bottom: 10px solid;
        background-color: currentColor;
        background-clip: content-box;
    }
</style>
<!-- CSS三道杠2 -->
<style>
    .icon {
        width: 120px;
        height: 20px;
        border-top: 60px double;
        border-bottom: 20px solid;
    }
</style>
<!-- CSS圆点 -->
<style>
    .icon {
        display: inline-block;
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 10px solid;
        border-radius: 50%;
        background-color: currentColor;
        background-clip: content-box;
    }
</style>

导航栏消除右边多余的尺寸

需要注意，改变尺寸的元素水平方向的尺寸不能是确定的。

<!-- html -->
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<!-- CSS -->
<style>
    div {
        width: 380px;
    }
    ul {
        margin-right: -20px;
    }
    ul > li {
        float: left;
        width: 100px;
        margin-right: 20px;
    }
</style>

正确的滚动底部留白方式

如果使用 padding 留白，在 Firefox 和 IE 不会显示。

<!-- html -->
<div class="box">
    <img src="demo.gif" />
</div>

<!-- CSS -->
<style>
    .box {
        height: 200px;
        overflow: auto;
    }
    .box > img {
        margin: 50px 0;
    }
</style>

高兼容的多栏等高

注意 container 高度不能是确定值，缺点是如果在内部使用锚点定位会出现问题。

<!-- html -->
<div class="container">
    <div id="colLeft" class="column-left">
        <h4>正方观点</h4>
        <p>观点1</p>
        <p>观点1</p>
    </div>
    <div id="colRight" class="column-right">
        <h4>反方观点</h4>
        <p>观点1</p>
    </div>
</div>

<!-- CSS -->
<style>
    .container {
        overflow: hidden;
    }
    .column-left,
    .column-right {
        margin-bottom: -9999px;
        padding-bottom: 9999px;
        width: 50%;
        float: left;
    }
    .column-left {
        background-color: #34538b;
    }
    .column-right {
        background-color: #cd0000;
    }
</style>

正确的块级元素右对齐

自动值对于保证金是占用剩余的空间。

<!-- html -->
<div>demo</div>

<!-- CSS -->
<style>
    div {
        width: 100px;
        margin-left: auto;
    }
</style>

图片上传增加框

此技巧主要说明 border 的颜色默认是继承自 color 的。

<!-- html -->
<div class="add"></div>

<!-- CSS -->
<style>
    .add {
        display: inline-block;
        width: 76px;
        height: 76px;
        color: #ccc;
        border: 2px dashed;
        text-indent: -12em;
        transition: color 0.25s;
        position: relative;
        overflow: hidden;
    }
    .add:hover {
        color: #34538b;
    }
    .add::before,
    .add::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .add::before {
        width: 20px;
        border-top: 4px solid;
        margin: -2px 0 0 -10px;
    }
    .add::after {
        height: 20px;
        border-left: 4px solid;
        margin: -10px 0 0 -2px;
    }
</style>

不影响背景图片位置设置边距。

和增加点击区域第二种方式一样。

<!-- html -->
<div class="box"></div>

<!-- CSS -->
<style>
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-right: 50px solid transparent;
        background-position: 100% 50%;
    }
</style>

高兼容双栏，一边等宽一边自适应，等高布局

缺点是边框不支持百分比，最多 2-3 栏。

<!-- html -->
<div class="box">
    <nav>
        <div>123</div>
        <div>123</div>
        <div>123</div>
    </nav>
    <section>
        <div>1234</div>
    </section>
</div>

<!-- CSS -->
<style>
    .box {
        border-left: 150px solid #333;
        background-color: #f0f3f9;
    }
    .box::after {
        content: "";
        display: block;
        clear: both;
    }
    .box > nav {
        width: 150px;
        margin-left: -150px;
        float: left;
    }
    .box > section {
        overflow: hidden;
    }
</style>

内联元素“近似”垂直居中

而为什么说“近似”，一句话说清楚，请看开头。

span {
    line-height: 24px;
}

多行内容“近似”垂直居中

<!-- html -->
<div class="box">
    <div class="content">基于行高实现的...</div>
</div>

<!-- CSS -->
<style>
    .box {
        width: 120px;
        line-height: 120px;
        background-color: #f0f3f9;
    }
    .content {
        display: inline-block;
        line-height: 20px;
        margin: 0 20px;
        vertical-align: middle;
    }
</style>

容器内图片的垂直方向间隙问题

产生的问题和“幽灵空白子系统”和 x-height 有关，你可以尝试在 img 前加入 x 字符观察一下。

<!-- html -->
<div class="box">
    <img src="demo.gif" />
</div>

<!-- CSS -->
<style>
    .box {
        width: 280px;
        outline: 1px solid #aaa;
        text-align: center;
        /* 解决方案1 */
        font-size: 0;
        /* 解决方案2 */
        line-leight: 0;
    }
    .box > img {
        height: 96px;
        /* 解决方案3 */
        display: block;
    }
</style>

图标文字对齐

ex 代表的是 x-height 的高度，根据 x 字形的不同（如 font-family）而不同。

<!-- 方式一 -->
<!-- html -->
<div class="box">
    <p><i class="icon icon-demo"></i>拉拉</p>
</div>

<!-- CSS -->
<style>
    .box {
        /* 根据图片大小变化 */
        line-height: 20px;
    }
    p {
        font-size: 40px;
    }
    .icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        white-space: nowrap;
        letter-spacing: -1em;
        text-indent: -999em;
    }
    .icon::before {
        /* 低版本IE7兼容 */
        content: "\3000";
    }
    .icon-demo {
        background: url(demo.png) no-repeat center;
    }
</style>

<!-- 方式二 -->
<!-- html -->
<p>文字 <img src="delete.png" /></p>

<!-- CSS -->
<style>
    p {
        font-size: 14px;
    }
    p > img {
        width: 16px;
        height: 16px;
        vertical-align: 0.6ex;
        position: relative;
        top: 8px;
    }
</style>

永远居中的弹框

特点是内容和浏览器尺寸变化都是自动变换大小和位置，可以通过伪元素的高度控制上下位置。

<!-- html -->
<div class="container">
    <div class="dialog">demo</dialog>
</div>

<!-- CSS -->
<style>
    .container {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: rgba(0,0,0,.5);
        text-align: center;
        font-size: 0;
        white-space: nowrap;
        overflow: auto;
    }
    .container::after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .dialog {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        font-size: 14px;
        white-space: normal;
        /* 弹框样式 */
        padding: 10px 14px;
        border: 1px solid #000;
        border-radius: 4px;
        background: #fff;
    }
</style>

文字环绕图片

float 的真正用途。

<!-- html -->
<div class="box">
    <div>
        <img src="demo.gif" />
    </div>
    <p>demo，demo，demo，demo，demo，demo，demo</p>
</div>

<!-- CSS -->
<style>
    .box {
        width: 100px;
    }
    img {
        float: left;
        width: 40px;
        height: 40px;
    }
</style>

利用溢出：隐藏自定义滚动条

实际上 overflow：hidden 是可以滚动的，可以通过锚点，focus，scrollTop 滚动。滚动条的实现请自行发挥。

“包含块”的绝对定位元素“一柱擎天”问题

<!-- html -->
<div class="father">
    <div class="son">拉拉</div>
</div>

<!-- CSS -->
<style>
    .father {
        position: relative;
        width: 20px;
        height: 20px;
    }
    .son {
        position: absolute;
        /* 解决方案 */
        white-space: nowrap;
    }
</style>

“无依赖绝对定位”的表单验证应用

在一个元素上如果单用（父元素的位置属性均是替换）“ position：absolute”，事实上元素将原地不动，最终会产生 BFC。

<!-- html -->
<div class="group">
    <label class="label"><span class="star">*</span>邮箱</label>
    <div class="cell">
        <input type="email" class="input" />
        <span class="remark">邮箱格式不准确（示意）</span>
    </div>
</div>
<div class="group">...</div>

<!-- CSS -->
<style>
    .group {
        width: 300px;
    }
    .label {
        float: left;
    }
    .remark {
        position: absolute;
    }
</style>

不通过宽度和高度设置预定全占用

利用 top 和 bottom 或 left 和 right 同时设置的时候会触发流体特性的特点；与通过“ top：0; left：0; width：100％; height：100％;”，在设置边距，边框， padding 的时候不会溢出到上方的外面（就算你想到 box-sizing，那 margin 呢？）；而之所以用 span 的原因是想说明绝对定位放置元素的 displayplace 为 block。

<!-- html -->
<span></span>
<!-- CSS -->
<style>
    span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>

margin：自动水平垂直居中

<!-- html -->
<div></div>

<!-- CSS -->
<style>
    div {
        width: 300px;
        height: 200px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
</style>

纸张卷边阴影

主要利用“位置：相对； z-index：0；”创建并合并到 z-index 的负值将阴影放置在“ contaniner”和“ page”之间。

你可以尝试将关键 CSS 去掉查看效果。

<!-- html -->
<div class="container">
    <div class="page">
        <h4>demo</h4>
        <p>demo</p>
    </div>
</div>

<!-- CSS -->
<style>
    .container {
        background-color: #666;
        height: 1000px;
        /* 创建层叠上下文，关键 */
        position: relative;
        z-index: 0;
    }
    .page {
        width: 600px;
        background-color: #f4f39e;
        background: linear-gradient(to bottom, #f4f39e, #f5da41 60%, #fe6);
        box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
        text-shadow: 0 1px 0 #f6ef97;
        position: relative;
        left: 200px;
        top: 200px;
    }
    .page:before {
        transform: skew(-15deg) rotate(-5deg);
        transform-origin: left bottom;
        left: 0;
    }
    .page:after {
        transform: skew(15deg) rotate(5deg);
        transform-origin: right bottom;
        right: 0;
    }
    /* 边角卷边阴影 */
    .page:before,
    .page:after {
        width: 90%;
        height: 20%;
        content: "";
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        position: absolute;
        bottom: 0;
        z-index: -1;
    }
</style>

隐藏文字

说这个主要是为了说明，Chrome 浏览器如果字体设置 12px 以下的大小（新版本已经不限制了），会被自动处理成 12px，但是有一个值除外，0。

p {
    font-size: 0;
}

解决文本装饰下划线和文本重叠

因为是内联元素，所以完全不用担心会影响元素高度的问题。

a {
    text-decoration: none;
    border-bottom: 1px solid;
    padding-bottom: 5px;
}

自动将输入的小写字母转换大写

input {
    text-transform: uppercase;
}

价格场景下的首个符号选择器

特点是可以让 html 结构活跃干净。

<!-- html -->
<p class="price">¥399</p>

<!-- CSS -->
<style>
    .price:first-letter {
        ...;
    }
</style>

元素隐藏同时资源不加载

后续可通过 script.innerHTML 访问。

<!-- html -->
<script type="text/html">
    <img src="1.jpg" />
</script>

头像裁剪矩形镂空效果

主要利用轮廓。

<!-- html -->
<div class="crop">
    <div id="cropArea" class="crop-area"></div>
    <img src="demo.gif" />
</div>

<!-- CSS -->
<style>
    .crop {
        width: 200px;
        height: 200px;
        overflow: hidden;
        position: relative;
    }
    .crop > .crop-area {
        position: absolute;
        top: 0;
        height: 0;
        width: 80px;
        height: 80px;
        outline: 200px solid rgba(0, 0, 0, 0.5);
        cursor: move;
    }
</style>

自定义光标

需要注意 IE 只支持 cur 文件。

.cursor-demo {
    cursor: url(demo.cur);
}

修改水平流到垂直流

兼容到 IE7；此应用涉及到一体的东西，所有水平流的特性都可以应用到垂直流中（称为水平居中变成了垂直居中）。

.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

超好用的 currentColor

<a href="##" class="link"><i class="icon"></i>返回</a>

.icon {
    display: inline-block;
    width: 16px;
    height: 20px;
    background-image: url(http:jartto.wang/test.png);
    background-color: currentColor; /* 该颜色控制图标的颜色 */
    background-position: 0 0;
}

.link:hover {
    color: #333; /* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
}

currentColor 表示“当前的标签所继承的文字颜色”

png 图片如何改颜色

网页中大多使用透明图片 png 格式，可是如果有天产品经理说，这个图标颜色能不能改成红色，恰巧设计师不能支持你，你该如何办？ 其一：自己重新 ps 一下图片，换个颜色； 其二：只能上 svg 喽，搞成 icon font；

这里，我们来说第三种方式，妙不妙可以试试哦！

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    overflow: hidden;
}

.icon-del {
    background: url(delete.png) no-repeat center;
}

.icon > .icon {
    position: relative;
    left: -20px;
    border-right: 20px solid transparent; /*下文注意点 2 有解释*/
    -webkit-filter: drop-shadow(20px 0);
    filter: drop-shadow(20px 0);
}

<p><strong>原始图标</strong></p>
<i class="icon icon-del"></i>
<p><strong>可以变色的图标</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>

• 需要注意几点：
  • 对于背景透明的 png 小图标而言，如果我们施加一个不带模糊的投影，就等同于生成了另外一个颜色的小图标；
  • 在 chrome 浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其 drop-shadow 是不可见的。实体部分哪怕有 1px 可见，则 drop-shadow 完全可见。

原理其实很简单，使用了 css3 滤镜 filter 中的 drop-shadow， drop-shadow 滤镜可以给元素或图片非透明区域添加投影。

如何去掉 chrome input 的背景黄色

当我们在做登陆页面的时候，在 chrome 中 input 会带上自动补全的黄色背景，大大影响美观。很多网站都没有去处理，但这并不难处理。作为高逼格的前端，这里就可以体现出你的价值，解决方案如下：

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;
}

当然，你也可以使用方案二，如下：

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

@-webkit-keyframes autofill {
    to {
        color: #fff;
        background: transparent;
    }
}

chrome 中设置小于 12px 的字体

这种改小字体，绝大部分肯定都是设计师的需求，因为小显得精致。

ant-checkbox-wrapper {
    cursor: pointer;
    font-size: 10px;
    display: inline-block;
    /* 不支持 */
    -webkit-text-size-adjust: none;
    transform: scale(0.9);
}

0.5px border 如何操作

• 使用渐变 linear-gradient 来操作，但需要注意浏览器兼容前缀；

div::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);
}

• 缩放 scale 处理：

div::after {
    content: "";
    display: block;
    position: absolute;
    left: -50%;
    bottom: 0;
    width: 200%;
    height: 1px;
    background: #c3c3c3;
    -webkit-transform: scale(0.5);
}

• 使用 background-image 和 css3 的九宫格裁减

.bd-t::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1px solid transparent;
    /* 下面用 stretch 和 round 都可以 */
    border-image: url("pic.png") 2 1 1 1 stretch;
    -webkit-border-image: url("pic.png") 2 1 1 1 stretch;
}

有趣的 drop-shadow

用法如下：

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
filter: drop-shadow(5px 5px 10px black);

CSS3 滤镜 filter 中的 drop-shadow，drop-shadow 滤镜可以给元素或图片非透明区域添加投影。

上文中已经提到了一种使用场景，这里还想说另一种，即使用拼凑法作出的小气泡，如果气泡需要阴影的话，请用 drop-shadow 来替代 box-shadow。

safari placeholder bugs

在项目中遇到 input 的 placeholder 在 safari 下设置行高失效的问题，解决思路如下： 1.使用 padding 使提示文字居中，如果 font-size:14px, UI 高度为 40px,我们可以设 height：14px,padding:13px 0; 2.使用 line-height:1px; 3.使用 vertical-align: middle;

补充一条：Safari 来写 hack 即 [line-height:1;]

css 实现图片

CSS :in-range 和 :out-of-range 伪类

这些伪类用于对指定范围内/外的输入进行样式设置。

• :in-range

如果 input 元素的当前值在 min 和 max 属性的范围之间，则 input 元素在范围内。

这个伪类可以很容易地确定一个字段的当前值是否可以接受。

• :out-of-range

如果 input 元素的当前值超出了 min 和 max 属性的范围，则 input 元素超出范围。

如果字段值超出其范围，它会给用户一个视觉指示。

/* in-range */
input:in-range {
    background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range {
    background-color: rgba(255, 0, 0, 0.25);
}

你应该知道这些伪类只适用于有范围限制的元素。 如果没有限制，则该元素不能在范围内或超出范围。

使用以下 CSS 代码来设置文本样式

p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 5rem;
    text-transform: capitalize;
    text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
    text-align: center;
    font-weight: normal;
    line-height: 1.6;
    letter-spacing: 2px;
}

CSS 抖动效果

'column-count' 属性

它指定一个元素应该被划分成的列数。

p {
    column-count: 2;
}

CSS 剪辑

使用 clip-path 属性，你只能显示元素的一部分，而隐藏其余部分。

.bg {
    height: 100%;
    width: 100%;
    background-color: rgba(199, 62, 133, 0.9);
    clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
    position: absolute;
}

解决 chrome input 自动填充白色背景

input:-webkit-autofill {
    box-shadow: 0 0 0 1000px white inset !important;
}
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

CSS :in-range 和 :out-of-range 伪类

这些伪类用于在指定范围限制之内和之外设置输入样式。

(a) : 在范围内

如果 input> 元素的当前值在 min 和 max 属性的边界之间，则该 input> 元素在范围内。

这个伪类可以很容易地确定一个字段的当前值是否可以接受。

(b) ：超出范围

如果 input> 元素的当前值超出 min 和 max 属性的范围，则该元素超出范围。

如果字段值超出其范围，它会向用户提供视觉指示。

/* in-range */
input:in-range {
    background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range {
    background-color: rgba(255, 0, 0, 0.25);
}

首字母下降

p:first-letter {
    font-size: 200%;
    color: #8A2BE2;
}

:first-letter 选择器用于指定元素首字母的样式，它只适用于块级元素。

mix-blend-mode:difference

mix-blend-mode:difference 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。

.mode {
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode:difference;
}
  .dark {
    position: relative;
    left: 6px;
    height: 24px;
    width: 24px;
    background-color: grey;
    border-radius: 50%;
}
.light {
    mix-blend-mode:difference;
    position: relative;
    left: -6px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 4px solid grey;
}