你应该知道的某些css属性

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;
}