19 个CSS小技巧

998 阅读2分钟

image.png

什么是CSS?

层叠样式表(CSS)是一种样式表语言,描述以HTML编写的页面的呈现方式。CSS是万维网的主要技术,与HTML和JavaScript并列。

打字效果

Drop shadow

当你处理透明图像时,你可以使用drop-shadow() filter函数在图像上创建阴影。

平滑滚动

无需JavaScript,只需一行CSS即可实现平滑滚动。

光标

你知道你可以使用自己的图像,甚至表情符号作为光标吗?

将文本截断到特定的行数

您可以使用“-webkit-line-clamp”属性将文本截断为特定的行数。

::selectionCSS伪元素

::selectionCSS伪元素将样式应用于文档中,突出显示的部分(例如在文本上单击拖动鼠标)。

可以调整元素大小

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工具提示。

更改文本输入光标的颜色

image.png

::in-range::out-of-range

::in-range::out-of-range伪类来设置,输入值超出minmax指定的范围的样式。

image.png

background-clip

gap

使用gapCSS属性设置行和列之间的间距(间隔)。

grayscale()函数

使用grayscale()滤镜,将输入图像转换为灰度。

image.png

创建漂亮的渐变边框

原文:markodenic.com/css-tips/#c…