有没有办法创建与元素不同的盒子阴影形状?

2024-05-26

当我将鼠标悬停在复选框输入上时,我尝试在复选框输入上创建圆形框阴影,但它采用元素的形状。如何将框阴影的形状更改为圆形?

<input type="checkbox" class="check">
<label for="checkbox">Pepperoni</label>
.check {
  &:hover {
    box-shadow: 0 0 0 6px red;
  }
}

使用剪辑路径:

.check:hover {
  box-shadow: 0 0 0 20px red;
  clip-path: circle(90%);
}
<input type="checkbox" class="check">
<label for="checkbox">Pepperoni</label>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

有没有办法创建与元素不同的盒子阴影形状? 的相关文章

  • 仅 IE9_有时_会忽略

    我们正在开发一个大量使用 这是典型的 TYPO3 网站 该网站是在子目录中开发的 稍后将被重新定位到顶级目录 因此我们无法轻易删除 我们的客户告诉我们 有时当她浏览新页面时 她得到的页面内容没有应用布局 我们对此进行了调试 仅在 IE9 中
  • 如何在 PHP 的 HTML 页面中显示错误消息?

    我有以下登录表单 login php 其中要求输入用户名和密码
  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • 如何在有序列表中组合数字和字母?

    如何在 CSS 中用数字和字母递增有序列表 ol nested margin bottom 0 counter reset item ol nested li display block position relative ol neste
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • Django:按钮链接

    我是一名 Django 新手用户 尝试创建一个按钮 单击该按钮会链接到我网站中的另一个页面 我尝试了一些不同的例子 但似乎没有一个对我有用 举个例子 为什么这不起作用
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者:基于设备像素比和基于视口的选择一起?

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

随机推荐

  • 我在 Android studio 中遇到错误

    在此输入图像描述 https i stack imgur com bvqID png我是安卓新手 我刚刚在 android studio 中创建了一个项目 并且在它的中遇到了问题manifest xml 错误是在 android icon
  • Android - 检测电容式触摸屏上的触摸压力?

    我听说过 MotionEvent e float press e getPressure 但这只会在没有触摸时返回 0 当我的手指触摸屏幕时返回 1 是否可以找到手指在触摸电容屏上施加的压力值 或者我的预感是否正确 即这只适用于电阻屏幕 M
  • 使用 vue-cli 服务时如何禁用 linting?

    我正在使用以下命令使用 vue cli 运行我的项目 vue cli service 服务 open 如何禁用所有 linting 目前每次保存时都会重新进行 linting 并且更改代码需要很长时间 我已经把 lintOnSave fal
  • ImageMagick 没有解码委托

    我正在尝试使用 imagemagick 转换图像 但收到此错误 转换 此图像格式 i imgur com nTheJ jpg 没有解码委托 error constitute c ReadImage 532 我正在这样做 convert ht
  • 对列表中的相邻元素进行分组

    假设我想编写一个函数来执行此操作 输入 1 1 3 3 4 2 2 5 6 6 输出 1 1 3 3 4 2 2 5 6 6 它将相同的相邻元素分组 这个方法的名称应该是什么 此操作有标准名称吗 In 1 1 3 3 4 2 2 5 6 6
  • Swift 3:将数据转换为字符串返回 nil 值

    将数据转换为字符串会返回 nil 值 Code thus unwraps the image if let image image print Saving image data don t unwrap here if let data
  • 当表有聚集索引时,数据是如何存储的

    我发现了无数的帖子 开头都是这样的很多时候我遇到人们说 聚集索引根据聚集索引键对表内的数据进行物理排序 这不是真的 然后这些帖子继续描述它是如何通过链表或其他方式实际存储的 例如 这个post http sqlwithmanoj wordp
  • Java 区域设置区分大小写

    我有以下代码来显示当前区域设置 System out println Locale getDefault System out println new Locale en US 上面给出的输出如下 en US en us 如何构造一个 Lo
  • 使用非负约束进行优化

    考虑以下功能 import numpy as np import scipy optimize as opt import math Periodic indexation def pl list i return list i len l
  • React + Redux 和 REST API?

    我在 Node 中构建了一个简单的 CRUD 应用程序 并已在 Express 中完成了其余 API 的创建 我现在正在寻求添加前端功能 并希望使用 React Redux 作为学习练习 然而 似乎所有围绕此的教程都直接使用 Redux 访
  • UnicodeDecodeError:“charmap”编解码器|安装 pip python-stdnum==1.8 时出错

    我对编程还很陌生 所以请耐心等待 当我为正在使用的模块安装一些必需的软件包时 我无法安装python stdnum 1 8 我收到以下错误消息 File C Users 59996 AppData Local Programs Python
  • 如何获取 Jenkins 的 API 令牌

    我正在尝试使用詹金斯REST https en wikipedia org wiki Representational state transferAPI 说明中说我需要 API 密钥 我浏览了所有配置页面才找到它 如何获取 Jenkins
  • 如何分发我的应用程序的多个版本?

    我想分发我的应用程序的两个版本 稳定分支以及当前的开发主干 使用试飞 http testflightapp com 而且 如果可能的话 我只想邀请测试人员一次 我可以在一个 TestFlight 团队中拥有一个应用程序的两个版本吗 或者也许
  • 为 Nimbus 外观设计简单的单元渲染器

    我有一个简单的单元格渲染器 它由一些组成JLabels 渲染器本身扩展JPanel 并且我正在尝试让它在 Nimbus 的外观和感觉中合理地渲染 基本上发生的事情是在lighter行 正如 Nimbus 所具有的交替行着色 我的特定单元格渲
  • 基于动态资源的样式

    看来这样的事情是不允许的 有什么解决办法吗
  • 在单独的终端屏幕上显示 git diff 和 git log 输出

    设置新的开发环境后 我遇到了一个奇怪的 git 行为 我不记得过去见过 我习惯于git diff and git log在终端中创建一个新屏幕并在其中显示其输出 什么less默认情况下 我用它作为我的寻呼机 然后我可以退出并返回到之前的终端
  • Fortran的性能

    Fortran 的表现计算机语言基准游戏 http shootout alioth debian org 出奇的糟糕 今天的结果显示 Fortran 在两项四核测试中分别排名第 14 和第 11 在单核测试中排名第 7 和第 10 现在 我
  • 管道 - 将多个来源/生产者合并为一个

    我正在使用读取文件sourceFile 但我还需要在处理操作中引入随机性 我认为最好的方法是拥有一个这样的制片人 Producer m StdGen ByteString 其中 StdGen 用于生成随机数 我打算让生产者执行 source
  • Elasticsearch:带有停用词消除功能的带状疱疹

    我正在尝试实现一个 Elasticsearch 映射来优化大量文本中的短语搜索 根据中的建议本文 http www elasticsearch org blog searching with shingles 我使用 shingle 过滤器
  • 有没有办法创建与元素不同的盒子阴影形状?

    当我将鼠标悬停在复选框输入上时 我尝试在复选框输入上创建圆形框阴影 但它采用元素的形状 如何将框阴影的形状更改为圆形