如何使用 css 淡出/模糊 div 的边框？
[英]how to fade-out/blur div's borders with css?
问题描述
I have read a lot of topic about this problem but nothing has worked so far.
我已经阅读了很多关于这个问题的话题，但到目前为止没有任何效果。 the easiest method I have read about involves using box-shadow, but this results in the shadow having a different color to the box even though the code of the color is the same (#141414).我读过的最简单的方法是使用 box-shadow，但这会导致阴影与框的颜色不同，即使颜色的代码相同 (#141414)。
Question题
How can I get a fade-out/blur border for a div box?如何获得 div 框的淡出/模糊边框？ It's quite hard to explain in writing so I made this image to give you the idea (ignore the background).很难用文字来解释，所以我制作了这张图片来给你这个想法（忽略背景）。 If you look closely you can see the blending and the color is uniform, fading to transparent.如果仔细观察，您可以看到混合并且颜色均匀，逐渐变透明。
box-shadow as i said, doesn't work for me.
box-shadow 正如我所说，对我不起作用。
body { background-image:url('http://phptesting.altervista.org/tessuto.png'); background-repeat: repeat; } div { width: 300px; height: 300px; background-color: #141414; border: 2px solid #141414; box-shadow: 0 0 5px 5px #141414; border-radius: 10px; }
<html> <body> <div></div> </body> </html>
3 个解决方案
解决方案1
8 已采纳 2015-02-07 16:40:50
box-shadow IS actually the only CSS way to get this effect. box-shadow实际上是获得此效果的唯一CSS方式。 Try something like this: 尝试这样的事情：
div { margin: 25px 10px; width: 100px; height: 100px; background: #141414; box-shadow: 0 0 15px 10px #141414; }
<div></div>
解决方案2
0 2019-04-02 10:07:17
changes the color with fade effect 用淡化效果改变颜色
#yourIDhere:hover{
transition-property: border-color;
transition-duration: 0.5s;
border-color: #976958;
}
解决方案3
0 2021-10-12 21:58:00
Here is how to fade a border using Styled Components.以下是如何使用样式化组件淡化边框。 It is based on https://styled-components.com/docs/api它基于https://styled-components.com/docs/api
Other answers provided a way to animate the component but I just wanted to fade the border, not the component.其他答案提供了一种为组件设置动画的方法，但我只想淡化边框，而不是组件。 After playing with it I realized that I just have to specify the border attribute.玩过之后我意识到我只需要指定边框属性。
import styled, { keyframes } from 'styled-components';
const fadeOut = keyframes`
0% { border: 2px solid blue; };
100% { border: 2px solid white; };
`
const MyStyle = styled.div`
animation: ${fadeOut} ease 3s;
transition-property: border-color;
transition-duration: 0.5s;
`
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.