CSS 中的圆帽下划线

2024-05-01

你能用 CSS 制作圆形下划线(如上图所示)吗?如何?

有没有办法做到这一点border-bottom? border-radius相反,会产生这种时尚的效果:


编辑:我误解了皮克想要什么,但这应该有效:

#test {
  font-size: 50px;
  background: transparent;
  border-radius: 10px;
  height: 10px;
  width: 255px;
  box-shadow: 0 55px 0 0 #000;
  font-family: sans-serif;
}
<div id="test">Hello world</div>

基本上我将文本放在 div 上,并且框阴影的大小与集合的大小相同height and width对于那个 div,只需玩height/width你应该得到你想要的......

JSBin 演示 http://jsbin.com/asenej/6/edit

演示截图:

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

CSS 中的圆帽下划线 的相关文章

  • Flexbox 列的垂直间距相等

    我在CSS中努力让我的Flexbox在垂直等距的列中显示项目 从而使列的每行之间的空间均匀 html body flex container margin 0 height 100 width 100 body font family Dr
  • jQuery / CSS3 动画阴影效果

    所以这个问题可能会被否决 但我认为有人可能会提供帮助 我正在寻找的效果是蓝色块像气球一样上下盘旋 当块上 下移动时 阴影在其下方不断增大和缩小 关于如何编程的任何想法 或者有人知道可以完成的教程 插件吗 你可以使用 jQuery 来完成 或
  • 如何检查字体是否有符号

    我的文档中有以下 css 规则 font family Trebuchet MS Tahoma 但我发现有些浏览器有 Trebuchet MS 字体没有我需要的符号 某些带有非拉丁字符的语言 在这种情况下 浏览器显示方块而不是符号 我怎样才
  • 如何更改 .NET MAUI Blazor 项目中的默认字体?

    我有一个用于 NET MAUI Blazor 应用程序的默认 Visual Studio 项目 针对 Windows x64 构建 我尝试了两种不同的更改字体的方法 在MauiProgram cs中有一个字体的配置ConfigureFont
  • 如何让浮动的div对齐到顶部?

    下面的代码可以在这个小提琴中查看 http jsfiddle net VgG55 10 http jsfiddle net VgG55 10 我有以下标记 其中 div 按以下顺序放置 div class wrapper div class
  • IE jquery click 仅适用于 li 中的文本,不适用于整个框

    我创建了一系列作为 li 的按钮 我希望用户能够单击它们 ul class item list li class item button style color 4bb2c5 1 li li class item button style
  • 浏览器特定的 CSS 属性

    在哪里可以找到完整的 浏览器特定 css 属性 参考 我的意思是一些属性 例如 moz border radius这仅适用于 Firefox 或 webkit min device pixel ratio 这些示例仅适用于指定的 Web 浏
  • 何时使用
    换行符 vs CSS 定位?

    我经常想知道如何正确使用 br 越线 似乎它们经常被错误地用于定位或清除应该使用 CSS 的内容 W3schoools org 说使用 br 适用于空白行 但不适用于创造或分离 http www w3schools com tags tag
  • 如何在 Chrome 中实现抓取光标图标?

    我知道可以在 Chrome 中使用抓取光标图标 当然是在 Gmail 中 但我不知道如何在我的代码中实现它 我已经尝试过 在CSS中 body cursor grab body cursor webkit grab body cursor
  • NodeJS 无法加载 css 文件

    所以我正在尝试制作一个 NodeJS 服务器 并且我尝试保留尽可能少的附加组件 但是 我遇到了一个问题 我似乎无法加载任何内容CSS我调用的文件HTML文件 该调用似乎确实由服务器处理 但它不会显示在浏览器中 My 网络服务器 js fil
  • css如何让文本底部对齐?

    怎么做怎么做 a 文字底部对齐吗 我已经添加了height line height and vertical align bottom 但文本仍然在 div 的中间 怎么做 谢谢 Test in http jsfiddle net BanA
  • 如何使用 HTML CSS JS 创建滑块/切换来更改屏幕上的字体大小 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 is there any way I can make this gt 所以我想制作一个滑块 切换器 用户可以拖动 滑动它来改变不同的
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • Bootstrap:使用单个选项卡导航控制多个选项卡面板

    我想用一个选项卡导航来控制两个不同的选项卡内容 在 Bootstrap 3 中 我有一个使用逗号分隔数据目标的解决方案 如本例所示 https stackoverflow com a 19719859 1788961 https stack
  • 为什么连字符 (-) 分隔的类名在 CSS 中广泛使用 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在浏览了一些网站和其他一些广泛使用的插件和框架中包含的一些 CSS 文件时 发现它们广泛使用连字符分隔的单词作为类名 实际上使用这样的类名有什么
  • CSS 无法与 CodeIgniter 一起使用

    这是我的 CI 代码的一部分 class page extends CI Controller var Page public function construct parent construct this gt Page 1 this
  • css:将div制作成圆角并在其3/4处添加边框

    我有这样的代码 div class circle div and css circle border left 1px solid red border bottom 1px solid red border radius 200px wi
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • 更改文本框中一个字符的颜色 HTML/CSS [重复]

    这个问题在这里已经有答案了 我正在设计一个网站 我想问一下大家 如何通过CSS改变HTML文本框中字符串中的一个字符的颜色 示例 STACK OVER FLOW 只是 A 字母是红色的 你不能用常规方法做到这一点
  • iframe 位置居中

    所以我找到了这段用于将内容放在中心的代码 但我的问题是它是为容器制作的 你知道如何为 iframe 制作它吗 或者你知道另一个代码吗 代码 center margin auto width 60 border 3px solid 73AD2

随机推荐

  • 如何将 Ctrl+,(control 加逗号)指定为 WPF 菜单项的键盘快捷键?

    Question I would like to assign the keyboard shortcut Ctrl control plus comma to the Preferences menu item How do I do t
  • 证明:为什么 java.lang.String.hashCode() 的实现与其文档相符?

    JDK 文档为java lang String hashCode http java sun com javase 6 docs api java lang String html hashCode famously https stack
  • OSGI Felix 容器正在初始化模拟私有字段

    我试图模拟我的类中的一个私有字段 该字段由运行我的应用程序的 OSGI 容器初始化 我放了一个示例代码供参考 请提供任何线索 import org apache felix scr annotations Component name My
  • 重新渲染模板时的 Meteor 回调

    我目前有一个模板 其中包含 each 在其中循环 我正在尝试找到一种方法来触发特定功能 each 循环已完成 Template rendered仅在第一次渲染模板时运行 因此不幸的是 这不起作用 有什么可以做到这一点吗 我就是这样做的 Te
  • 不符合 BindableObject 协议 - Xcode 11 Beta 4

    尝试一下那里的例子 找到一个项目 其中有一个类bindableobject并且它没有给出任何错误 现在 Xcode 11 beta 4 已经发布 我收到错误 类型 UserSettings 不符合协议 BindableObject 它有一个
  • 按位置获取元素?

    我正在研究 SVG 脚本 有 getElementById 或 getElementsByTagName 但我找不到任何方法来按位置获取元素 比如获取位置为x 10 y 10的元素 有什么办法可以实现这个目标吗 var yourElemen
  • Bootstrap 100% 宽度/全宽度

    我想用 Bootstrap 创建一个新网站 我需要它的宽度为 100 但我不希望它是流畅的 至少现在不是 我遇到的问题是 使用 bootstrap 标准将您限制为 960px 并且使用流体布局它是全宽的 但其行为就像流体布局应该通过在窗口尺
  • 如何在Nightwatch中测试伪元素的css属性

    我想使用 Nightwatch 测试我的网站上的背景图像是否正确 但它设置为 before 伪元素的背景 这是 CSS icon circle delete before content background url images svg
  • 错误:专用 IP 需要 invalid_request device_id 和 device_name

    我正在使用 localhost 8080 使用 Google Drive API 进行开发 突然我想在我的本地部署沙箱中测试它 它的IP地址为 192 168 1 1 8080 据此 我更改了开发人员控制台客户端回调 URL 中的凭据 我正
  • .NET 参考源代码中的四个破折号组是什么?

    我正在浏览源码PluralizationService http referencesource microsoft com System Data Entity Design System Data Entity Design Plura
  • 在 g++ 中链接文件

    最近我尝试用g 在Ubuntu上 编译一个程序 通常我使用 Dev C 在 Windows 上 只要我创建一个项目并将所有必要的文件放入其中 它就可以正常工作 编译程序时出现的错误是 filename cpp undefined refer
  • 如何在ModelAdmin中使用InlinePanel?

    我正在设置一个需要使用多个子模型实例创建的模型 我希望能够在管理界面中编辑和创建此模型 因此我使用以下命令添加它ModelAdmin http docs wagtail io en v1 9 reference contrib modela
  • PHP 5.5中的password_hash函数

    我有以下函数 可以对密码进行哈希处理并将其存储在数据库中 我正在尝试使用 php 5 5 中的password hash 函数 但它给了我奇怪的结果 function hashpass password include includes c
  • 在 SugarCRM 中,将帐户所有权转让给其他用户不会更新联系人所有权

    我正在使用 SugarCRM v6 x 并发现当将帐户所有权转移给新的销售代表 分配的用户 ID 字段 时 联系人和其他相关子记录也不会转移 这是 SugarCRM 作者的实际设计选择吗 如果是 其背后的原因是什么 是否有推荐的帐户转移方法
  • Android 数字格式不知为何是错误的,我得到的不是 3.5,而是 3.499999999,为什么?

    我将一些数据存储在数据库中 然后使用游标读取这些数据 所有数据均为 56 45 3 04 0 03 类型 即小数点后两位 现在我想对它们求和 但这似乎并不容易 我得到这些数字c getDouble 3 然后我将它添加到 sum 变量中 如下
  • iOS 信号处理程序可以轻松收集哪些原因信息?

    我正在尝试向应用程序添加一些崩溃日志记录 并且我有一个signal设置处理程序以捕获标准 致命 信号 我可以在信号处理程序中实际 简单地收集哪些 原因 信息 如果有 以进行记录 我花了大约 2 小时谷歌搜索内容 但我找到的大部分内容都是针对
  • Java多线程和安全发布[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 看完之后 Java并发实践 http jcip net and OSGI 实践 http neilbartlett name blog osgi
  • PayPal API 监听器网站支付标准 URI

    PayPal IPN 指南文档说得很清楚 将请求发布到 www paypal com 或 www sandbox paypal com 具体取决于您是要在沙盒中上线还是测试您的侦听器 等待 PayPal 的响应 该响应要么已验证 要么无效
  • 在 MVC 中重用 WPF ViewModel 是否可行?

    我们有一个用 WPF WCF 编写的富客户端应用程序 并打算在 ASP net 中创建一个配套网站 如果可能 使用 MVC 我被要求弄清楚我们当前的代码库中有多少是可以重用的 由一个单独的团队 而且我对 ASP net 几乎没有经验 我们将
  • CSS 中的圆帽下划线

    你能用 CSS 制作圆形下划线 如上图所示 吗 如何 有没有办法做到这一点border bottom border radius相反 会产生这种时尚的效果 编辑 我误解了皮克想要什么 但这应该有效 test font size 50px b