程序员经验分享-hwhale

如何在图像上使用边框半径制作插入边框

2023-12-08

How do to an inset border with a border radius on an image like so: enter image description here

我可以使用大纲 CSS 属性

.img{
    border-radius: 16px;
    outline: 3px solid #fece40;
    outline-offset: -16px;  
}

但这给了我插入边框，但没有轮廓的半径设置。


使用额外的 div 并考虑伪元素：

.img {
  border-radius: 16px;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.img:before {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 3px solid #fece40;
  inset: 16px;
}

img {
  display: block;
}
<div class="img"><img src="https://picsum.photos/id/237/200/200"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Border

insets

如何在图像上使用边框半径制作插入边框 的相关文章

  • IE9支持CSS线性渐变吗？

    有了 Chrome Safari 和 Firefox webkit gradient and moz linear gradient特性 我怎样才能用 IE9 做同样的事情呢 最好的跨浏览器解决方案是 background fff back

  • 猫头鹰轮播，制作自定义导航

    所以我有一个包含三张图像的猫头鹰旋转木马 我还在左侧和右侧添加了自定义导航箭头 png 图像 然而 这些箭头目前是无用的 因为我找不到一种方法来真正让它们在我的猫头鹰旋转木马的图像之间切换 我无休止地寻找 找不到解决方案 有任何想法吗 您需

  • IE8 和怪异模式

    IE8 是否像 IE6 7 一样以怪异模式运行 我有一个网页 其中有一些非常奇怪的代码 内容以填充和负边距居中 它在 IE6 7 和其他浏览器中可以正常工作 但在 IE8 中 内容区域的宽度只有一半并且不居中 怪异模式的标志 源代码在 DO

  • 状态代码 304（Jade、Node、Express）

    我在我的 jade 文件中链接 bootstrap 和 jquery link rel stylesheet href stylesheets bootstrap css and script src javascripts jquery

  • 如何用按钮生成不同的颜色

    我是初学者 想知道如何使用生成按钮生成所有不同的颜色 我应该向按钮 addEventListener 的第二个参数添加什么 另外 如何让它在刷新时自动生成颜色而不是不生成颜色 var getcolors document querySele

  • 从三行菜单到十字菜单的动画变换

    我有一个三行动画菜单 当您单击它时 它会切换为十字 首先 您会看到三条线变成一条线 然后切换到十字线 但我想跳过从三行到一行的步骤 我怎样才能做到这一点 这是小提琴http jsfiddle net adyocsm9 http jsfidd

  • React 无法识别 DOM 元素上的 `isActive` 属性 - styled-components

    我有以下内容svg我传递道具的组件 import React from react export default props gt

  • 根据屏幕尺寸更改图像 src

    我正在尝试使用媒体查询根据屏幕尺寸更改图像 src 我尝试过背景 url x 但它不起作用 我在某处读到我应该使用 content url x 代替 但是当我这样做时 我得到一个空白页面 谁能告诉我我的代码有什么问题吗 HTML div c

  • 半流体布局 CSS/Html

    我有一个两列布局 其中右列的静态宽度为 350px 左列的宽度应填充页面的其余部分 或者至少这是我想要发生的事情 但不幸的是事实并非如此 看一下我的 css html http jsfiddle net CmJ7P http jsfiddl

  • 复合组件和 CSS

    I have newcss css formdiv width 30 margin 150 auto 和复合组件

  • 让 Compass 将供应商前缀添加到动画选择器

    谁能告诉我如何让 Compass 在编译时将供应商前缀添加到 CSS3 动画选择器中 我的配置文件如下所示 http path css dir sass dir images dir img javascripts dir js outpu

  • 使用 SASS 切换用户主题 - Ruby on Rails

    所以我有一个 Rails 管理系统 允许用户选择一个主题 基本上是一组 SASS 颜色变量 它将使用新颜色重新编译 application css scss 当用户从下拉菜单中选择并提交时 更改此设置的最佳方法是什么 我阅读了一些有关缓存和

  • 应用于整个 HTML 的 BODY 标签的背景颜色[重复]

    这个问题在这里已经有答案了 我对 html 中 body 标签的大小感到困惑 我有一个艰难的代码如下 body padding 0px height 100px background color e5e5e5 为什么背景覆盖整个页面 我认为

  • 向 jQuery 函数 Interval 添加动画

    我的问题是如何向倒计时器添加一些动画 我的意思是每次调用 Function Interval 时都需要添加一些动画 如下所示 youtube 视频链接 https www youtube com watch v A9fnvhcWPRo 第二

  • onMouseEnter 和 onMouseLeave 未按预期运行

    我正在尝试为我的组件模拟悬停效果 然而 onMouseEnter Leave 事件没有按预期工作 现在我试图让它简单地 console log 一个字符串来检查它是否正常工作 但什么也没有发生 目的是我可以在悬停时更改其背景颜色 我尝试通过

  • 显示居中的图像行

    我有一排三张图像 目前显示得很好 现在 我想在这三个图像的正下方显示另外两个图像 并且我希望它们居中 它看起来有点像一个颠倒的金字塔 无论我做什么 底行都保持左对齐 这是 css category width 176px font size

  • CSS变量名可以以数字开头吗？

    我想知道定义一个以这样的数字开头的 css 变量是否有效 root 1space 32px 这在 Chrome 上工作得很好 但是该代码没有经过验证https jigsaw w3 org css validator https jigsaw

  • 如何将 OTF/TTF 文件转换为 EOT 格式？

    我需要使用 font face 功能 并且我的字体是 OTF TTF 格式 而 Microsoft 浏览器仅支持 EOT 格式 我尝试使用微软工具WEFT 但它不起作用或者我不明白它是如何工作的 还有其他方法可以将我的字体转换为 EOT 格

  • CSS3输入元素的圆角，没有js/图像

    谁可以为输入元素制作圆角 我需要一种不使用 javascript 和图像的方法 Added

  • 放大 div 内的图像而不移动 div

    如何使图像在此 div 比例内 而不在悬停时进行实际的 div 缩放 所以我只想放大图像 这是代码 div img src some image div Use transform scale container display inlin

随机推荐

  • 获取资源文件夹中的文件列表 - iOS

    假设我的 iPhone 应用程序的 资源 文件夹中有一个名为 文档 的文件夹 有没有一种方法可以在运行时获取该文件夹中包含的所有文件的数组或某种类型的列表 所以 在代码中 它看起来像 NSMutableArray myFiles get a

  • 如何结合 SELECT DISTINCT 和 SUM()

    我在 Oracle 中有一个如下所示的表 Products Product ID Product NME Product SUP Quantity 1 Apple USA 100 2 Fish Japan 50 3 Wine Italy 1

  • 如何改变 django 模型中 unique true 的行为？

    这里我没有从数据库中删除模型对象 我只是改变is deleted删除时状态为 True 但在这样做的同时unique True对于已删除的对象给出错误 那么我该如何处理这个问题 我想排除is deleted True来自唯一 True 的对

  • TStringGrid - OnMouseUp 未被调用！

    我在 Delphi 7 中的 TStringGrid 有一个奇怪的行为 如果弹出菜单与网格关联 Delphi 不会调用 OnMouseUp 事件 基本上 当按下人民币时 菜单的弹出会以某种方式取消 延迟 OnMouseUp 实际上 为了 1

  • 如何执行存储在 varchar 变量中的数学表达式

    我的数据库函数中有一个变量 LocalVariable 2 3 100 我想通过执行另一个变量中的表达式来获得结果 有人可以建议如何执行该表达式吗 另外 我想在数据库函数中 而不是在存储过程中 执行此操作 我期望的结果是 600 DECLA

  • 为什么我的 int[] 数组循环越界？

    Warning 我对 Java 和一般编程非常陌生 我会尽量说得清楚 我正在尝试取一个简单的整数 inputnumber 将其转换为字符串 temp 创建一个新的 int 数组 numberarray 并从最后一位数字开始循环遍历这个 in

  • Gradle 3.0.0 alpha 变体输出问题

    我想要有一个不一样的versionCode for debug构建类型而不是其中的类型release构建类型 这曾经通过在 Gradle Android 插件 v2 3 2 Gradle v3 3 中使用下面的配置来工作 但现在在 v3 0

  • SQL 到实体框架计数分组

    我需要翻译这个SQL声明给一个Linq Entity询问 SELECT name count name FROM people GROUP by name 查询语法 var query from p in context People gr

  • Karate API 测试 - 在同一功能文件中的不同场景中重用变量

    Karate 是否支持这样的功能 您可以在场景中定义变量并在同一功能文件的其他场景中重用它 我尝试做同样的事情但得到一个错误 在同一特征文件中重用变量的最佳方法是什么 Scenario Get the request Id url base

  • 如何获取插入计算机的可移动驱动器的列表？

    我想获取插入计算机的可移动驱动程序的列表 我怎样才能做到这一点pywin32Python 中的模块 注意 重要的是我能够将可移动驱动器与固定驱动器分开 该算法很简单 Call MS Docs GetGetLogicalDriveString

  • WP8 SDK 导入服务参考无法进行基于任务的操作

    到目前为止 在 VS2012 中使用 生成基于任务的操作 导入服务引用似乎不起作用 它变灰了 对 WPF 新项目的测试运行良好 我可以选择基于任务的操作或异步操作 有没有一种简单的方法可以将异步调用包装在任务中 有没有一种简单的方法可以将异

  • 如何更改 Google 静态地图中的视角？

    是否可以更改 google 静态地图中的视角 就像在 Google 地图 API 中如何更改一样 这里检查 setTilt 函数 https developers google com maps documentation javascri

  • 即使应用程序终止，iOS 也会更新位置

    即使应用程序终止 我也尝试更新用户位置 我向我的 plist 添加了地图和后台模式 gt 位置更新 并设置了一个本地通知 该通知将在位置更新时触发 但它从未被解雇 我有这个AppDelegate h interface AppDelegat

  • 使用 DeviceLifecycleEvents 源的 IoT 中心消息路由不起作用

    我已经在使用 IoT 中心并配置了消息路由来路由TwinChangeEvents到事件中心 一个 Azure 函数EventHubTrigger处理消息 这工作得很好 现在 我想配置消息路由来路由DeviceLifecycleEvents到

  • Bootstrap 抛出未捕获错误：Bootstrap 的 JavaScript 需要 jQuery [关闭]

    Closed 这个问题需要调试细节 目前不接受答案 我正在尝试使用 Bootstrap 为程序制作界面 我将 jQuery 1 11 0 添加到标记并认为就是这样 但是当我在浏览器中启动网页时 jQuery 报告错误 Uncaught Er

  • $( "

    选择器有什么作用 div div 这段代码中的语法是什么意思 我见过像这样的选择器div or someId但我很困惑什么 div div means function log message div div text message pr

  • Cakephp 覆盖 HtmlHelper::link

    我想设置 HtmlHelper link 方法 以便默认选项数组具有 escape false 如何在不改变核心类的情况下实现这一目标 OBS 我已经清理了表单输入 所以我想这不会有问题 提前致谢 蛋糕2 1 5 我刚刚实现了这个 我想指出

  • 使用 f2py 将 numpy 字符串格式数组传递给 fortran

    我的目标是从 fortran 中的 python numpy 数组打印第二个字符串 但我只打印第一个字符 而且它也不一定是正确的字符串 谁能告诉我将完整字符串数组传递给 Fortran 的正确方法是什么 代码如下 测试py import n

  • 在tasklet中退出Spring Batch作业

    我有一个 Spring Batch tasklet 但我不知道如何从它失败 我想检查某些参数 如果它们不存在 则该步骤的作业失败 Component public class Tfp211SetupTasklet extends Abstr

  • 如何在图像上使用边框半径制作插入边框

    How do to an inset border with a border radius on an image like so 我可以使用大纲 CSS 属性 img border radius 16px outline 3px sol

热门标签