什么是CSS?
层叠样式表(CSS)是一种样式表语言,描述以HTML编写的页面的呈现方式。CSS是万维网的主要技术,与HTML和JavaScript并列。
打字效果
Drop shadow
当你处理透明图像时,你可以使用drop-shadow()
filter函数在图像上创建阴影。
平滑滚动
无需JavaScript,只需一行CSS即可实现平滑滚动。
光标
你知道你可以使用自己的图像,甚至表情符号作为光标吗?
将文本截断到特定的行数
您可以使用“-webkit-line-clamp”属性将文本截断为特定的行数。
::selection
CSS伪元素
::selection
CSS伪元素将样式应用于文档中,突出显示的部分(例如在文本上单击拖动鼠标)。
可以调整元素大小
resize
用于设置元素是否可调整尺寸,以及可调整的方向。
resize: both;
resize: horizontal;
resize: vertical;
resize: none;
resize
不适用于下列元素:
- 内联元素
overflow
属性设置为visible
的块元素
CSS模态
您可以使用:target
伪类来创建模态。
:empty
选择器
你可以使用:empty
选择器来样式化一个没有子元素或文本的元素:
创建自定义滚动条
position: sticky;
你可以用两行CSS创建粘性布局。
scroll-snap-type
您可以使用CSS滚动捕捉功能来创建良好的滚动体验:
attr()
使用attr()
CSS函数创建CSS工具提示。
更改文本输入光标的颜色
::in-range
和 ::out-of-range
::in-range
和::out-of-range
伪类来设置,输入值超出min
和max
指定的范围的样式。
background-clip
gap
使用gap
CSS属性设置行和列之间的间距(间隔)。
grayscale()函数
使用grayscale()
滤镜,将输入图像转换为灰度。
创建漂亮的渐变边框