Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在鼠标悬停时平滑地插入方框阴影效果？

问如何在鼠标悬停时平滑地插入方框阴影效果？
EN

Stack Overflow用户

提问于 2014-04-12 06:12:46

回答 3查看 294关注 0票数 0

如何在此website上创建平滑的文本输入框阴影效果

EN

回答 3

Stack Overflow用户

发布于 2014-04-12 06:17:25

使用CSS3：

#element {
/* all your styles.. */
-webkit-transition:0.2s linear;
-moz-transition:0.2s linear;
-o-transition:0.2s linear;
transition:0.2s linear;
}

#element:hover {
-webkit-box-shadow:0 0 5px blue;
-moz-box-shadow:0 0 5px blue;
-o-box-shadow:0 0 5px blue;
box-shadow:0 0 5px blue;
}

票数 2

EN

Stack Overflow用户

发布于 2014-04-12 06:19:29

尝试使用Firebug或类似的工具。

您声明了一些初始的“不可见”的长方体阴影和它的可视副本，并声明了一些额外的过渡：

.elem {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: box-shadow 0.2s linear 0s;
}
.elem:hover {
    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}

此样式是从该站点提取的。

编辑:你想要鼠标悬停而不是聚焦。

票数 0

EN

Stack Overflow用户

发布于 2014-04-12 06:24:39

.element
{
   background-color: #fff;
   border: 1px solid #ccc;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
   -webkit-transition: border linear .2s,box-shadow linear .2s;
   -moz-transition: border linear .2s,box-shadow linear .2s;
   -o-transition: border linear .2s,box-shadow linear .2s;
   transition: border linear .2s,box-shadow linear .2s;
}
.elem:hover 
{
    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23026811

复制

相关文章

文字有阴影效果

css java html https http

h1#hovertree { color: rgba(0, 85, 166, 1); font: bold 22px "微软雅黑"; margin: 10px 0; text-align: center; text-shadow: 1px 1px rgba(243, 243, 243, 1), 1px 2px rgba(178, 178, 178, 1) }

全栈程序员站长

2022/07/15

1K0

CSS 边框阴影效果

https java 网络安全 html

#shadow1{ width: 200px; height: 100px; color: white; background-color: red; box-shadow: 5px -5px 1px 1px #000; -webkit-box-shadow:5px -5px 1px 1px #000; -moz-box-shadow:5px 5px 1px 1px #000; /* For IE 8 */ -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=120, Color=’#1000′); /* For IE 5.5 – 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=125, Color=’#1000′); }

全栈程序员站长

2022/07/10

3.1K0

阴影进阶，实现更加的立体的阴影效果！

css sass sas 编程算法

关于它们的基础语法和使用就不过多描述，这一部分大家可以先在 MDN 补齐，贴几张图快速复习一下：

Sb_Coco

2022/04/28

2K0

阴影进阶，实现更加的立体的阴影效果！

canvas多重阴影发光效果

有的人可能会说，这个用阴影其实就可以实现。但是从图中可以看出，是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。比如

用户3158888

2021/01/26

1.4K0

canvas多重阴影发光效果

有的人可能会说，这个用阴影其实就可以实现。但是从图中可以看出，是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。

用户3158888

2021/01/18

1.3K0

css背景阴影部分效果【样式效果】

持续更新文字效果阴影 text-shadow: 5px 5px 5px #0000CC;/*右偏移下偏移阴影背景模糊*/ 块阴影 box-shadow:2px 5px 12px #3B2

AlexTao

2019/12/13

2.9K0

css背景阴影部分效果【样式效果】

css文字底部阴影效果

今天要实现一个文字的阴影效果，大概是这个样子的代码如下： <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>css文字阴影效果</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; cha

王小婷

2020/09/27

2K0

canvas可视化效果之内阴影效果

在之前的一个轨道交通可视化项目中，运用到了很多绘制技巧。可以参考之前的一篇文章《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》

用户3158888

2020/12/22

1.4K0

canvas可视化效果之内阴影效果

在之前的一个轨道交通可视化项目中，运用到了很多绘制技巧。可以参考之前的一篇文章《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》

用户3158888

2020/12/31

1K0

css实现悬浮效果的阴影

要实现的效果图：图片.png 实现的代码： -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box-shadow:0px 3px 3px #c8c8c8

王小婷

2018/05/31

2.5K0

input输入框内阴影效果

作为一个合格的前端开发工程师，是能够将UI的设计图百分百还原的，不管设计图有多么的炫酷，都能够做到，当然也是从细节上一点点的实现的。今天继续记录简单的input输入框内阴影效果，效果如下：

王小婷

2019/08/18

1.4K0

使用纯 CSS 实现滚动阴影效果

css 容器 javascript 编程算法

开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：

Sb_Coco

2021/01/06

2.6K0

CSS3实现“图片阴影”效果

利用多投影重叠的原理，实现曲线阴影与翘边阴影的效果，花一个小时看完的课程，理解的似懂非懂。直接发一下老师写的成品吧。用到来取。css都补上了注释。

AlexTao

2019/12/13

1.9K0

Web前端鼠标悬停实现显示与隐藏效果

css 微信小程序

css定义，偏移量，相对定位，绝对定位显示与隐藏二维码相对于微信图标定位鼠标悬停微信图标上显示鼠标离开微信图标时隐藏什么是定位，就是定义网页标签在运行时显示的位置 css提供Position属性用于指定元素在网页中定位的方式 background-position: 设置背景图片的显示位置

达达前端

2019/07/28

4K0

[Python图像处理] 四.图像平滑之均值滤波、方框滤波、高斯滤波及中值滤波「建议收藏」

python opencv 图像处理腾讯云开发者社区

该系列文章是讲解Python OpenCV图像处理知识，前期主要讲解图像入门、OpenCV基础用法，中期讲解图像处理的各种算法，包括图像锐化算子、图像增强技术、图像分割等，后期结合深度学习研究图像识别、图像分类应用。希望文章对您有所帮助，如果有不足之处，还请海涵~

全栈程序员站长

2022/11/04

6730

[Python图像处理] 四.图像平滑之均值滤波、方框滤波、高斯滤波、中值滤波及双边滤波

opencv python 编程算法图像处理

该系列文章是讲解Python OpenCV图像处理知识，前期主要讲解图像入门、OpenCV基础用法，中期讲解图像处理的各种算法，包括图像锐化算子、图像增强技术、图像分割等，后期结合深度学习研究图像识别、图像分类、目标检测应用。

Eastmount

2021/12/02

6.7K0

[Python图像处理] 四.图像平滑之均值滤波、方框滤波、高斯滤波、中值滤波及双边滤波

如何去掉listview滑动时的阴影

android listview

我们在开发过程中用到listview控件的时候，会碰到这样的一个小问题，就是上下滑动的时候会发现上面的下面的边上会有阴影，那么怎么去掉这个阴影呢？

再见孙悟空_

2023/02/10

8330

如何去掉listview滑动时的阴影

点击加载更多

相似问题

如何在伪After内容中添加方框阴影效果

21

css3边框和方框阴影效果

10

CSS方框2.5D弹出阴影效果

11

CSS:方框-四面阴影，模糊效果

43

方框内的方框阴影

50

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例