跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 洗牌
搜索

文章标签
border-image

7 篇文章
{
,

}
文章“翻转、反转和颠倒”的直接链接
border-image SVG

翻转、反转和颠倒

SVG 的 <path> 语法 真是个怪兽。它有各种各样的命令,构成了一种迷你语言,功能强大,能够绘制任何东西。不过,不要太害怕它,因为一些...

Avatar of Chris Coyier
Chris Coyier 于 2021 年 12 月 8 日
文章“使用 CSS 制作糖果幽灵按钮”的直接链接
background-clip border-image buttons clip-path ghost buttons gradients mask mask-clip mask-composite mix-blend-mode

使用 CSS 制作糖果幽灵按钮

最近,我在寻找一些代码灵感,因为我完全没有艺术细胞,所以我只能找到其他人想出来的漂亮东西,然后用干净的...

Avatar of Ana Tudor
Ana Tudor 于 2021 年 10 月 31 日
文章“如何使用边框图像动画化 SVG”的直接链接
animating border border-image SVG animation

如何使用边框图像动画化 SVG

让我们看看如何将 CSS 中的 border-image 属性与围绕边框移动的动画 SVG 相结合。在这个过程中,我们将介绍如何手工制作可调整大小的九宫格动画 SVG,不仅可以用来重新创建...

Avatar of Uri Shaked
Uri Shaked 于 2020 年 12 月 4 日
文章“堆叠的“边框””的直接链接
border border-image

堆叠的“边框”

前不久,我正在给 An Event Apart 的 网站添加焦点样式。其中一部分是在设计的不同区域应用不同的焦点效果,例如标题中的白色圆环和...

Avatar of Eric Meyer
Eric Meyer 于 2019 年 3 月 19 日
文章“CSS 中的渐变边框”的直接链接
border border-image gradients

CSS 中的渐变边框

假设你需要在元素周围添加一个渐变边框。我的想法是

  • 没有简单明显的 CSS API 可以做到这一点。
  • 我将用一个带有 linear-gradient 背景的包装元素,然后一个内部元素会阻止
...
Avatar of Chris Coyier
Chris Coyier 于 2022 年 9 月 30 日
文章“9 种方式切片 SVG”的直接链接
3d border-image shadow SVG

9 种方式切片 SVG

Paul Lewis 制作了一个 3D 卡片翻转动画。这很简单,但是还需要一个阴影元素

阴影可能需要移动或淡入淡出,因此我们需要一个可以使用变换和不透明度进行动画处理的解决方案。

...
Avatar of Chris Coyier
Chris Coyier 于 2016 年 9 月 6 日
文章“理解边框图像”的直接链接
border-image

理解边框图像

新的 CSS3 属性 border-image 有点棘手,但它可以让你使用单个 div 和单个图像创建具有自定义边框(或者如果需要,可以创建投影)的灵活盒子。在本文中,我...

Avatar of Nora Brown
Nora Brown 于 2020 年 3 月 2 日

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发的最新动态

通过我们手工制作的时事通讯

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

© 2024 . All rights reserved.