3.视觉效果

1.投影

单侧：

box-shadow: 0 5px 4px -4px black;

双侧：

box-shadow: 5px 0 5px -5px black,
	           -5px 0 5px -5px black;

邻边：

box-shadow: 3px 3px 6px -3px black;

不规则：

filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5)); // 滤镜

2.滤镜效果

filter: sepia(); // 降饱和度，所有像素色相均收敛到35～40

filter: sepia() saturate(4) ; // 升饱和度，参数肉眼判断

filter: sepia() saturate(4) hue-rotate(295deg); // 将像素的色相以指定度数偏移
                                                   褪色，不自然，过度风格化

// 改进
.div { background: hsl(335, 100%, 50%) }
.div > img { mix-blend-mode: luminosity } // 混合模式，保留上层元素的hsl亮度信息，
                                             并吸取下层的色相和饱和度信息

3.毛玻璃效果

body, main::before {
	background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
}

main {
	position: relative;
	margin: 0 auto;
	padding: 1em;
	max-width: 23em;
	background: hsla(0,0%,100%,.25) border-box;
  overflow: hidden; // 消除多余模糊区域
}

main::before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: -30px; // 模糊效果会减弱实色范围，补偿必须大于模式半径
	filter: blur(20px); // 
  z-index: -1; // 防止覆盖宿主元素
}

4.用户体验

1.扩大可点击区域

border: 10px solid transparent; // 扩张热区
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; // 内嵌投影模拟实色边框
background-clip: padding-box; // 把背景限制在原本的区域

// 改进，边框影响布局，不能使用边框时
button {
	position: relative;
}

button:before {   // 伪元素更为灵活
	content: '';
	position: absolute;
	top: -10px; right: -10px;
	bottom: -10px; left: -10px;
}

2.弱化背景

伪元素：

body.dimmed::before {   // 无法判断点击的是弹出层还是遮罩层
	position: fixed;
	top: 0; right: 0;
	bottom: 0; left: 0;
  z-index: 1;
  background: rgba(0,0,0,.8)
}

box-shadow：

position: fixed; // 与视口相关，没有滚动条时可以使用，无法阻止点击后面的元素
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8); // 投影同时向四个方向扩展，50vmax

阴影和模糊：

filter: blur(3px) contrast(.8) brightness(.8) // 模糊滤镜

3.滚动提示

fixed

此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

local

此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll

此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）

background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px, // 顶部遮挡阴影白框
	          radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px, //顶部阴影
	          linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px, //底部阴影
	          radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px; //底部遮挡阴影白框
background-repeat: no-repeat;
background-attachment: local, scroll, local, scroll;

参考：

[CSS揭秘]

CSS一些技巧（二）