CSS扩大可点击区域的2种方法

最新推荐文章于 2024-08-09 18:56:14 发布

转载最新推荐文章于 2024-08-09 18:56:14 发布 · 3.5k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/joyjoe/p/6916147.html

标签

#css3 #css #html

Css/Canvas/SVG/Elementui 专栏收录该内容

144 篇文章

订阅专栏

本文介绍如何通过透明边框、background-clip属性、内阴影和伪元素，为小按钮设计一个四周均匀扩展10px的热区，兼顾边框效果和背景控制，适合前端开发者实践。

🔍 VisionCore Pro | 多模态智能语义分析平台

AI应用

PyTorch

CLIP

VisionCore Pro 是一款基于 OpenAI CLIP (Contrastive Language-Image Pre-training) 架构的企业级多模态视觉分析工具。通过先进的深度学习技术，该平台实现了图像与文本之间的深度语义对齐，支持零样本（Zero-shot）图像识别与分类，为企业视觉资产数字化、智能监控及内容审核提供高效的技术支撑。

目的: 想给一个简单的小按钮扩大其热区在四个方向上均向外扩张10px

解决方案:

常规的解决方案可能是设置一圈透明边框。

border: 10px solid transparent;

但是如果按钮有背景色，那么边框很可能会扩大按钮的可视尺寸。于是可以采用background-clip属性将背景限制在padding-box区域内。

background-clip: padding-box;

如果此时想给按钮添加边框效果如阴影效果，那么只能是添加内阴影。因为外阴影会加在border-box区域外侧。

box-shadow: 0 0 0 1px rgba(0,0,0, 0.3) inset;

于是终极解决办法是使用伪元素(伪元素同样可以代表其宿主元素来响应鼠标的交互)

.button{

　　position: relative;
}

.button::after{

　　content: "";

　　position: absolute;

　　left: -10px;

　　top: -10px;

　　right: -10px;

　　bottom: -10px;

}

可以将伪元素设置为任何尺寸位置或形状甚至是脱离原来的位置

您可能感兴趣的与本文相关的镜像

🔍 VisionCore Pro | 多模态智能语义分析平台

AI应用

PyTorch

CLIP