1、阴影的效果:
https://codepen.io/embrace924/pen/wvJWRNB
filter: drop-shadow(2px 4px 8px #585858);
2、outline来描边 ,它甚至可以在里面
3.设置容器长宽比:
aspect-ratio
//宽3高1
aspect-ratio: 3/1;
4、控制一个元素的可调整大小
resize
CSS
https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize
none
:元素不能被用户缩放。
both:
允许用户在水平和垂直方向上调整元素的大小。
horizontal
:允许用户在水平方向上调整元素的大小。
vertical
:允许用户在垂直方向上调整元素的大小。
5、css选中空元素:
:empty
代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格)。注释或处理指令都不会产生影响。
第一个和第三个区别是跨行的空格
6、滚动效果:
scroll-snap-type
属性定义在滚动容器中的一个临时点(snap point)如何被严格的执行。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type
7、输入框光标的颜色:
caret-color
8、超出输入框限制:
`::in-range` and `::out-of-range` pseudo-classes
9、文字使用背景图底色:
background-clip
设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
{
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}