跳到主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
stroke

6 篇文章
{
,

}
文章“CSS 描边文字:终极指南”的直接链接
描边 SVG

CSS 描边文字:终极指南

每当我想到网页上的描边文字,我就会想到:不不不。

CSS 中有 -webkit-text-stroke 用于实现描边,但它将描边放置在字符矢量轮廓的中间,绝对确保字符……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 9 月 3 日
文章“一个小技巧,让绘制 SVG 线更容易”的直接链接
路径 描边 stroke-dasharray SVG

一个小技巧,让绘制 SVG 线更容易

在使用 SVG 绘制线条时,通常会使用带有 stroke 属性的 <path></path> 元素。您设置一个与路径本身一样长的 stroke-dasharray,以及一个扩展到足以覆盖整个描边线条的 stroke-offset……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 2 月 28 日
文章“iconsvg.xyz”的直接链接
图标系统 描边 SVG

iconsvg.xyz

Gaddafi Rusli 的 ICONSVG 有很多值得称道的地方。

  1. 它提供内联 <svg>,这是提供图标最通用的方式,并且 可能也是它们应该被使用的方式。每个图标都是一个微小的
…
Avatar of Chris Coyier
Chris Coyier 于 2019 年 2 月 25 日
文章“Sketch 现在复制了内外描边对齐”的直接链接
Sketch 描边 SVG

Sketch 现在复制了内外描边对齐

我上周才 抱怨过描边

这就是 CSS 中 text-stroke 的问题所在:你没有选择。它只能是居中对齐的描边。其他两个选项(外侧对齐或内侧对齐)中任何一个,可以说,都会更有用。

仍然……

Avatar of Chris Coyier
Chris Coyier 于 2017 年 4 月 13 日
文章“stroke-dasharray”的直接链接
描边 stroke-dasharray SVG

stroke-dasharray

CSS 中的 stroke-dasharray 属性设置 SVG 形状描边的虚线长度。更具体地说,它设置了交替的虚线和虚线之间间隙的图案长度……

Avatar of Geoff Graham
Geoff Graham 于 2022 年 7 月 13 日
文章“滚动绘制”的直接链接
pathLength 描边 stroke-dasharray SVG

滚动绘制

我们之前深入研究过 SVG 线绘制的工作原理。这是一个巧妙的技巧,您使用虚线作为描边,但虚线中的间隙非常长,覆盖了整个路径。然后你……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 1 月 27 日

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费额度!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.