木炭/模拟了像CSS3边框效果 [英] Charcoal/mock up like border effect with CSS3

问题描述

有没有办法用CSS3绘制木炭般的边框？这些线在许多模型工具中很流行，因为它们象征着在设计阶段的工作。

例如。此处的图片

http://balsamiq.com/products/模型

• 线条可能不直，并且有一些扭曲

  > / li>
  

解决方案

变体您可以使用 border-image 属性创建相当类似的效果。示例：

http：// hertzen .com / experiments / css-charcoal-borders / （它只是对所有元素使用单个图像）

使用我的方法，位被着色 white ，因此对元素应用 background-color 将使其中的元素的内容着色，留下外部 white 。如果你需要让它工作在多种不同的背景颜色（要求你在 border-image 内部和外部具有透明度），那么你可以在当前元素，它在边框内，并分配 background-color 。

Is there a way to draw "charcoal like" borders with CSS3? These kind of lines are popular in many mock-up tools as they symbolize work in design phase.

E.g. images here

http://balsamiq.com/products/mockups

• Line may not be straight and has some "twist" in it

• Line has boldness in it

• Brush effect: line may contain individual white pixels in it

解决方案

Variant beat me to it, but as he mentioned, you can create quite a similar effect with the border-image property. Examples:

http://hertzen.com/experiments/css-charcoal-borders/ (it is just using a single image for all elements)

With my approach, the border images outer bit is colored white, so applying a background-color to the element will color the contents of the element inside it, leaving the outer bit white. If you need to get it working on multiple different background colors (requiring you to have transparancy inside and outside of the border-image), then you can create an element behind the current element, which is within the borders, and assign the background-color there.

这篇关于木炭/模拟了像CSS3边框效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！