程序员经验分享-hwhale

在边框中间剪开

2023-12-12

我试图实现悬停时看起来像图像的边框：

enter image description here

我不知道如何描述边界。但有什么方法可以实现这一点吗？

.text {
  width: 100px;
  height: 20px;
  text-align: center;
}

.text:hover {
  border: 1px solid black;
}
<div class="text"> Sample </div>

在之前和之后使用悬停

.text {
  position: relative;
  width: 100px;
  height: 20px;
  text-align: center;
}

.text:hover::before, 
.text:hover::after {
  content: '';
  position: absolute;
  border: 1px solid black;
  border-bottom: 0;
  width:100%;
  left:0;
  height: 20%; 
}

.text:hover::after {
  bottom: 0;
  border: 1px solid black;
  border-top: 0;
}
<div class="text"> Sample </div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

在边框中间剪开 的相关文章

随机推荐

  • 在c#中读取原始图像文件

    如何在未安装编解码器的情况下解码 打开 CR2 或 NEF 和 ARW 等原始图像文件 例如 lightroom 打开原始文件 我的代码如下所示 if fe CR2 fe NEF fe ARW BitmapDecoder bmpDec Bi

  • Xamarin MonoAndroid 设备管理

    我正在使用 Visual Studio 2017 来开发 Android 单视图应用程序 该应用程序应该是一个信息亭应用程序 我的目标是 API 21 在 Visual Studio AVD 设备 提供的模拟器上 我遇到的问题是我似乎无法制

  • 在 Joda 中将 UTC 转换为 LocalDateTime？

    DateTime dt new DateTime 2014 09 15T21 20 14 System out println dt System out println dt plusMillis 581042272 toDateTime

  • Android - 将下一个和上一个按钮添加到软键盘，该按钮在我的活动中单击编辑文本时出现

    我需要将 下一个 和 上一个 按钮添加到我的软键盘上 该键盘在单击活动页面中的编辑文本字段时出现 请为我提供有关实现此概念的教程的指导 提前致谢 您可以通过以下方式在 xml 中执行此操作 android imeOptions action

  • 如何在 WCF 客户端中提供用户名和客户端证书（为什么此示例有效）？

    考虑一个 WCF 服务 其目的是让传输层需要客户端证书 客户端证书在 IIS 中设置为 必需 同样 消息层也会有用户名认证 现在我已经看到这个问题了 禁止 WCF 客户端证书和用户名凭据 我可以在某种程度上理解那里发生的事情 并意识到 WC

  • Serilog HTTP接收器+Logstash：将Serilog消息数组拆分为单独的日志事件

    我们正在使用Serilog HTTP 接收器将消息发送到 Logstash 但是HTTP消息体是这样的 events Timestamp 2016 11 03T00 09 11 4899425 01 00 Level Debug Messa

  • 文件对象的初始化

    我想问一下java中初始化的格式 我目前所知道的是 int a 1 double b 1 0 String c java etc 现在 在主类中我想初始化一个File 我不知道该怎么做 首先 文件是一种对象类型 与原始类型 int 和 do

  • Windows Phone 7 中的网格

    我有一个网格视图代码 下面有分为3列 但我的代码有一个问题 什么时候多重数据被检索到 第 3 列中的所有数据都是重叠的 我如何修改下面的代码 例如它会在下面依次显示 Define grid column size Grid schedule

  • sqlite3 中的列详细信息

    在 SQLITE 数据库中 如果我需要表元详细信息 我可以运行以下命令 C sqlite gt sqlite3 exe sqlite2 db SQLite version 3 7 15 2012 12 12 13 36 53 Enter h

  • 使用最多两位小数的 double

    我想使用双精度 最多只有小数点后两位 即 它将存储最多 2 个小数位 如果比较两个 double 值 则比较应仅基于前 2 个小数位 如何实现这样的事情呢 我的意思是存储 比较 一切都将仅基于小数点后两位 剩下的地方可能不同 大于 小于 无

  • 获取小数点后十二位的纬度和经度

    我有一个应用程序 我必须从纬度和经度获取用户的当前位置 对于这两个值 我必须得到小数点后 12 位 这是用于获取用户位置的 GPS 跟踪器类 public class GPSTracker extends Service implement

  • java.lang.NoClassDefFoundError：com.google.android.gms.gcm.GoogleCloudMessaging

    我正在使用开发 GCM 示例应用程序http javapapers com android google cloud messaging gcm for android and push notifications comment 1037

  • 删除查询字符串“?” HTML 形式的方法 GET

    我有一个在新窗口中打开的简单的 Google 图片搜索表单 当我想将表单参数更改为 Unsplash 在 URL 搜索中不使用查询字符串 时 表单继续发送查询字符串 HTML

  • TYPO3 Ajax 页面配置

    如何从 TYPO3 中的 Ajax 页面删除 CSS 样式的 conted 标头输出 这是我的打字稿 ajax PAGE ajax typeNum 1234 this solution is working but then I don t

  • 使用 http.request 获取 Node.js 中的二进制内容

    我想从 https 请求中检索二进制数据 我找到了一个类似的问题使用请求方法 使用 request 获取 Node js 中的二进制内容 是说设置encoding to null应该有效 但事实并非如此 options hostname u

  • 在 ggplot2 中，在顶部绘制反转 y 轴和 x 轴的图

    我想得到ggplot2绘制顶部带有反转 y 轴和 x 轴的图 我用了scale y reverse 获得反向 y 轴 但无法弄清楚如何将 x 轴放在顶部而不是底部 dfn lt read table header T text supp d

  • Matplotlib 对数刻度刻度标签，乳胶字体中的减号太长

    我在 matplotib 中使用 text usetex True 这对于具有线性比例的图来说非常有用 然而 对于对数刻度 y 刻度如下所示 指数中的负号占用了绘图中的大量水平空间 这不太好 我希望它看起来像这样 该字体来自 gnuplot

  • 日期时间转 JavaScript 日期

    Stackoverflow 上的另一个答案是从 Javascript 日期到 net DateTime 的转换 long msSinceEpoch 1260402952906 Value from Date getTime in JavaS

  • 在球体上使用多个纹理 [Three.js]

    是否可以在球体上加载多个纹理 我的意思是说有什么办法Three js将球体分割成n碎片 单独纹理它们并再次将这些碎片渲染为整个球体 我不想在球体上加载整个纹理 而是只渲染用户首先在屏幕上看到的那些部分 并且当用户旋转球体时 必须加载纹理的其

  • 在边框中间剪开

    我试图实现悬停时看起来像图像的边框 我不知道如何描述边界 但有什么方法可以实现这一点吗 text width 100px height 20px text align center text hover border 1px solid b

热门标签