重新访问CSS边界图像

我上一篇文章“重新访问CSS多列布局”指出，自从我的第一本书《超越CSS 》出版以来已经过去了近二十年。本书探索了当时的新闻CSS属性及其应用程序。十年后，基于此建造的五周年纪念版五周年版，引入了border-image属性。

（注意：已更新的，可以自由使用的在线版本，超越CSS进行了重新访问，存在。我的书店可从我的书店使用hardboiled的Web Design 。）

border-image财产的潜力使我兴奋。即使在表格中，它也可以使图像集成到元素边界中（除非应用边框崩溃）。

尽管经常使用， border-image仍未得到充分利用。它的尴尬语法要怪吗？也许对实践创造性实现的解释不足？可能两者。

最近在艾美奖的游戏作曲家迈克·沃思（Mike Worth）的网站上的最新工作是一个图形丰富的项目，广泛展示了border-image 。

border-image属性和价值：快速刷新

大多数解释始于这种常见的速记：

 <code>border-image: \[source\] [slice]/\[width]/[outset\] [repeat]</code>

但是，了解单个属性更简单。

图像源

首先，定义图像源（位图，向量或CSS梯度）：

 <code>border-image-source: url('/img/scroll.png');</code>

对于SVG，存在几个选项：外部文件：

 <code>border-image-source: url('/img/scroll.svg');</code>

数据URI（尽管SVG和HTML的XML性质较少推荐）：

 <code>border-image-source: url('data:image/svg xml;base64,…');</code>

直接嵌入SVG代码（避免额外的HTTP请求）：

 <code>border-image-source: url('data:image/svg xml;utf8,…');</code>

或者，使用CSS梯度：

 <code>border-image-source: conical-gradient(…);</code>

（提示：记住： border-image在背景和box-shadow之上呈现，但在内容之下。）

切片图像

指定源后，切片将图像划分以放置在边界的九个区域中。这通常使新来者感到困惑。

虽然简单的等级切片很常见， border-image处理复杂形状。无形的切割线将图像分为九个部分，类似于图形编辑器中的切片指南。

border-image-slice定义了切片大小，指定了距每个边缘的距离。这可能是一个值：

 <code>border-image-slice: 65</code>

顶部/底部和左/右值组合：

 <code>border-image-slice: 115 65;</code>

或单个值（顺时针：上，右，底部，左）：

 <code>border-image-slice: 65 65 115 125;</code>

左上图的图像部分转到左上角，依此类推。位图图像假设像素单元； SVG受益于明确的高度和宽度：

<code><svg height="600px" width="600px"> …</svg></code>

相应地设置边界宽度：

 <code>border-image-width: 65px 65px 115px 125px;</code>

中心填充

中心通常被忽略，但fill关键字利用它：

 <code>border-image-slice: 65px 65px 115px 125px fill;</code>

重复

控制图像如何沿边缘重复或伸展：

• stretch ：伸展平稳。
• repeat ：重复纹理图像。
• round ：重复整个零件，调整图像的大小。
• space ：重复整个零件，添加空间。

单个边缘设置是可能的：

 <code>border-image-repeat: stretch round;</code>

启动

使用边框图像库将图像扩展到border-image-outset以外：

 <code>border-image-outset: 10px;</code>

或指定个人销售：

 <code>border-image-outset: 20px 10px;</code>

实践中border-image ：Mike Worth的网站

迈克·沃思（Mike Worth）的网站受到90年代动画的启发，使用了border-image以实现效率和视觉影响。

装饰按钮

使用SVG和border-image创建了Stone平板电脑风格的按钮：

 <code>button { border-image-repeat: stretch; border-image-slice: 10 10 10 10 fill; border-image-source: url('data:image/svg xml;utf8,…'); border-image-width: 20px; }</code>

文章滚动

使用单个SVG和border-image实现了纸滚动效果，避免了伪元素：

 <code>article { border-image-slice: 150 95 150 95 fill; border-image-width: 150px 95px 150px 95px; border-image-repeat: stretch round; border-image-source: url('data:image/svg xml;utf8,…'); }</code>

主页覆盖

交互式叠加层使用的border-image在悬停在悬停上添加彩色梯度：

 <code>section:hover::before { opacity: .5; border-image: fill 0 linear-gradient(rgba(0,0,255,.25),rgba(255,0,0,1)); }</code>

结论

border-image是有效地创建具有视觉惊人设计的强大工具。应更广泛地探索其潜力。迈克·沃思（Mike Worth）的网站展示了其创建复杂边界，装饰元素和动态覆盖的能力。尝试border-image以增强您的设计。

（注意： Mike Worth的网站于2025年4月启动；可用Codepen示例。）

关于安迪·克拉克

安迪·克拉克（Andy Clarke）是一位开创性的网页设计师，以其创意和视觉上令人惊叹的作品而闻名。他撰写了几本有影响力的书籍，包括超越CSS ，硬煮的网页设计和网络的艺术指导，并提供了流行的Web设计合同模板，合同杀手。

以上是重新访问CSS边界图像的详细内容。更多信息请关注PHP中文网其他相关文章！