CSS3 的木炭/模拟边框效果

2024-01-02

有没有办法用 CSS3 绘制“木炭状”边框?这些线条在许多模型工具中很受欢迎,因为它们象征着设计阶段的工作。

例如。图片在这里

http://balsamiq.com/products/mockups http://balsamiq.com/products/mockups

  • 线可能不是直的并且有一些“扭曲”

  • 线条有大胆感

  • 画笔效果:线条中可能包含单独的白色像素


Variant比我先一步,但正如他提到的,你可以用border-image财产。例子:

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

按照我的方法,边框图像外部位是彩色的white,因此应用background-color到元素将为其内部元素的内容着色,留下外部位white。如果您需要让它在多种不同的背景颜色上工作(要求您在背景内部和外部具有透明度)border-image),然后您可以在当前元素后面(位于边框之内)创建一个元素,并分配background-color there.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS3 的木炭/模拟边框效果 的相关文章

  • 如何在jqplot中显示饼图之外的标签?

    Jqplot 有如下图表 jqplot 图表 http www jqplot com tests pie donut charts php 我的问题是如何在 a 之外显示标签jqplot chart像下面这样high chart 高图表可以
  • Javascript 播放声音性能重吗?

    我正在用 Javascript 制作一个简单的游戏 当一个物体与墙壁碰撞时 它会发出 砰 的声音 声音的响度取决于物体的速度 速度越高 gt 声音越大 播放功能 playSound function id vol ID of the sou
  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • 使用画布仅删除文本而不删除图像

    我正在尝试删除画布元素中的文本 而不丢失Background Image of the Canvas Element 我想我需要保存Imagesrc并把它还给Canvas Element之后clearRect 但我不知道该怎么做 我希望有人
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • JSF 2.1 中的 HTML 4 <按钮>

    我想使用以下命令 The JSF
  • CSS:水平滚动时背景不存在

    好的 我的背景设置如下 HTML div div CONTENT HERE div div CSS container background url image gif content width 800px margin auto 因此
  • 对一组复选框使用 HTML5“必需”属性?

    使用支持 HTML5 的较新浏览器 例如 FireFox 4 时 并且表单字段具有属性required required 并且表单字段为空 空白 然后点击提交按钮 浏览器检测到 必填 字段为空 并且不提交表单 相反 浏览器会显示一条提示 要
  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有
  • 如何使用 a-href 标签链接回文件夹? [复制]

    这个问题在这里已经有答案了 好吧 我在文件夹中有一个页面 该页面称为 jobs html 该文件夹简称为 jobs 它是我的 网站 文件夹的子文件夹 在 main 文件夹的主目录中是我的 home html 文件 当我尝试做的时候 a hr
  • 用隐藏单元格补充 colspanned 表格有什么不好吗?

    我一直在表格上开发一些排序和选择功能 我发现在具有跨单元格的表格中定位非常困难 我只是添加了跨区单元格并将其隐藏 它看起来不错 它与我的 js 一起工作 非常适合索引 但我想知道这是否是合法的方法 stuffing display none
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 为什么需要重置浏览器?

    好吧 我知道这可能不是最好的标题why我们需要重置浏览器 因为浏览器有不同的默认设置 我的问题太长 无法放入标题中 如果每个人 90 的时间都需要使用重置样式表 为什么浏览器需要设置默认样式 无论如何我们都会删除它们 对吗 因为某些规则默认
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

随机推荐

  • 如何设置 Amazon S3、回形针和 ENV 变量

    我尝试了许多不同的方法来使用 ENV 变量设置 S3 进行图像上传 但无法使其工作 我知道我的密钥和存储桶名称有效 因为当我将它们直接放入代码中时 我的图像会正确上传 但是 当我尝试切换到 ENV 变量时 事情不起作用 我使用了 Figar
  • 谷歌图表不显示轴标签

    这不适用于图像图表 我有以下代码可以生成正确的图表 但标签不显示 图表 div 位于另一个 div 中 该 div 用作我的页面上的选项卡 当我在未选择包含图表的选项卡时运行该函数时 图表将显示为没有标签 当我在选择选项卡的情况下运行该函数
  • android UDP连接,没有接收到任何数据

    我是这方面的新手 所以如果我问愚蠢的问题 请原谅我 我试图在 Eclipse 的 PC 模拟器和 Android 手机之间建立 UDP 连接 或两个 Android 手机设备之间 我有一个router并且手机通过路由器的 wifi 网络连接
  • 如何在 SQLAlchemy 中创建带有外键列表的字段?

    我正在尝试在另一个模型的字段中存储模型列表 下面是一个简单的例子 我有一个现有的模型 Actor 我想创建一个新模型 Movie 与场Movie list of actors import uuid from sqlalchemy impo
  • 使用 Angular ui-grid 时的列标题换行

    我已将我的 AngularJS SPA 应用程序从ng grid v2 0 7 to ui grid v3我的列标题不再环绕 我的列标题现在是单行并显示省略号 当列标题不适合时 此功能是否已被删除或者是否已被其他方法取代 我相信我已经找到了
  • SQL Server 2005 中的等周

    在 SQL Server 2008 中 可以通过以下方式找到 isoweek SELECT datepart iso week getdate 在 SQL Server 2008 之前 没有内置函数来查找 isoweek 我一直在寻找一个好
  • 如何同时使用多个键提取字典值?

    我遇到了以下问题 dict1 a 1 b 2 c 3 d 4 正常检索方法 dict1 a gt 输出 gt 1预期方法 dict1 a b gt 输出 gt 1 2 我的要求是通过同时提供多个键从字典中提取多个值 如上面预期方法中所述 有
  • 从 EST/EDT 转换为 GMT

    如何将日期时间从 EST EDT 转换为 GMT 但我不知道代码将在哪里运行 未知的本地时区 也不知道节省时间 你要TimeZoneInfo ConvertTimeToUtc http msdn microsoft com en us li
  • 找不到文件“obj\Debug\Program.exe.manifest”

    如果之前已经回答过这个问题 我们深表歉意 我的 VS2010 SP1 VB NET 环境发生了一些问题 我已经通过 ClickOnce 成功地编译和发布了项目 A 一段时间 然后尝试发布项目 B 并收到了错误 在文件 microsoft c
  • EJB 3.1 和 NIO2:监控文件系统

    我想我们大多数人都同意 NIO2 是一个很好用的东西 假设您想要监视文件系统的某些部分以获取传入的 xml 文件 现在这是一项简单的任务 但是 如果我想将这些东西集成到现有的 Java EE 应用程序中 这样我就不必启动另一个服务 应用程序
  • 如何通过复选框启用和禁用 DataGridView 中的特定行?

    我试图通过选中和取消选中 gridview 内的复选框来启用和禁用 DataGridView 中的特定行 C Windows 应用程序 我尝试使用 CellClick 事件 但未按预期工作 这是我尝试过的代码 private void da
  • Javascript removeEventListener 不在类内工作[重复]

    这个问题在这里已经有答案了 我一直在玩 es6 类 并尝试设置一个简单的鼠标类 addEventListener有效 但由于某种原因我无法删除它们removeEventListener 我猜这与上下文绑定有关 但我不知道如何解决这个问题 u
  • 如何访问共享库中的文件?

    我有一个带有 groovy 脚本的共享库 我在 jenkinsfile 中调用该脚本 如下所示 MySharedLibFunction some args 我的共享库中还有一个我想要执行的 ps1 文件 但如果我这样做powershell
  • 如何为 UIPickerView 行设置 Voice Over 辅助功能标签?

    我正在尝试使我的 Voice Over 的 UIPickerView 可访问 我注意到 UIPickerViewAccessibilityDelegate 协议相当不完整 它只允许您指定 pickerView 组件的标签和提示 而不是组件内
  • Junit4运行测试类固定次数并显示结果(eclipse)

    我希望能够运行测试类指定的次数 该类看起来像 RunWith Parameterized class public class TestSmithWaterman private static String args private sta
  • 如何使 Ionic 4 ion-col 高度相同

    我有一个带有主卡片的页面 其中包含网格内的其他小卡片 我希望所有列都具有相同的高度 这将是特定行内列之间的最大高度 这是我的模板和我的样式
  • iPhone : (id)copyWithZone:(NSZone *)zone :“区域”是什么?

    在类中实现 NSCopying 的此方法以启用复制时 区域参数使用什么 如果我设置一个新对象 我不需要用 allocWithZone 分配它 因为分配就足够了 我很困惑 这是过去的遗物 我们有多个 区域 来分配 如今 所有应用程序只有一个区
  • 流畅的 NHibernate compositeid 到映射类

    我试图弄清楚如何使用 CompositeId 来映射另一个类 这是一个测试用例 表格 TestParent TestParentId PK FavoriteColor TestChild TestParentId PK ChildName
  • Codeigniter 2.1.3:sess_destroy() 导致未定义的索引:session_id 等在 'sess_use_database' == TRUE 时发出通知

    我一直在使用数据库的会话测试 codeigniter 的功能 每当我注销 使用 sess destroy 时 我都会收到以下通知 A PHP Error was encountered Severity Notice Message Und
  • CSS3 的木炭/模拟边框效果

    有没有办法用 CSS3 绘制 木炭状 边框 这些线条在许多模型工具中很受欢迎 因为它们象征着设计阶段的工作 例如 图片在这里 http balsamiq com products mockups http balsamiq com prod