CSS SNIPPET

视觉效果

点击卡片标题或按钮查看代码片段。

使用:not选择符

:not 伪选择符有助于设置一组元素中除了最后(或指定)元素之外的所有其他元素的样式。

效果演示
  • One
  • Two
  • Three
  • Four

查看代码

使用CSS计数器

计数器本质上是CSS维护的变量,计数器的值可以根据CSS规则递增, 以便跟踪其使用的次数。

效果演示
  • List item
  • List item
  • List item
    • List item
    • List item
    • List item

查看代码

使用全屏伪类

使用:fullscreen CSS 伪类的元素仅在全屏模式显示。

效果演示

Click the button below to enter the element into fullscreen mode.

I change color in fullscreen mode!


查看代码

使用系统原生字体

使用操作系统的原生字体获得接近原生app的体验。

效果演示

This text uses the system font.

查看代码

发丝边框实现

为元素设置1个原生设备像素宽度的细边框。

效果演示
text

查看代码

复位所有样式的简单方法

使用一个属性复位所有样式为默认值。这不会应用directionunicode-bidi 属性。

效果演示
Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

查看代码

实现动态阴影

基于元素自身的颜色创建类似于box-shadow 的阴影效果。

效果演示

查看代码

导航条目的悬停与焦点效果

使用transform为导航条目添加炫酷的悬停和焦点效果。

效果演示

查看代码

文本选中效果自定义

修改被选中文本的样式。

效果演示

Select some of this text.

查看代码

文本首字下沉

设置第一段首字母比其他所有字母都大 - 通常用于表现一个新的 部分的开始。

效果演示

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.

Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.

查看代码

斑马条纹背景的列表

创建一个具有交替背景色的列表,对于区分有跨行内容的兄弟条目很有帮助。

效果演示
  • Item 01
  • Item 02
  • Item 03
  • Item 04
  • Item 05

查看代码

有三角形的对话文本容器

创建一个顶部有三角形的文本容器。

HTML

效果演示
Border with top triangle

查看代码

渐变色的文本

为文本设置渐变色。

效果演示

Gradient text

查看代码

滚动条样式自定义

在WebKit平台上自定义文档和可滚动元素的滚动条样式。

效果演示

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?

查看代码

滚动框溢出内容的渐变效果

为溢出元素添加淡出渐变,可以更好地提醒用户还有更多内容需要滚动查看。

效果演示
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?

查看代码

用纯CSS创建三角形

使用纯CSS创建一个三角形。

效果演示

查看代码

用纯CSS创建切换开关

只使用CSS创建一个切换开关。

效果演示

查看代码

用纯CSS画圆

用纯CSS创建一个圆形。

效果演示

查看代码

美观的文本下划线

text-decoration: underline<u></u>的更好一些的为文本添加下划线的替代方案, 下行字母不会被下划线剪切。原生实现text-decoration-skip-ink: auto对下划线 的控制能力比较弱。

效果演示

Pretty text underline without clipping descending letters.

查看代码

表单样式的焦点随动

当表单中的输入元素获得焦点时,改变表单的样式。

效果演示

查看代码

锯齿形的区域分隔效果

使用一个SVG形状分隔两个不同的块,从而创建出与标准的水平分隔相比 更加有趣的视觉效果。

效果演示

查看代码

雕刻文本效果

为文本创建蚀刻效果,使其看起来像是在背景上雕刻出来的字。

效果演示

I appear etched into the background.

查看代码

鼠标跟踪的渐变效果

为悬停鼠标的移动增加渐变效果。

感谢: Tobias Reich

效果演示

查看代码