如何解决为什么在Div周围没有CSS阴影效果
比方说,我有一个像这样的div:
我想为这个div制作这个effect。所以我用了这些代码:
#myTypingText {
width: 700px;
height: 120px;
padding: 12px;
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
line-height: 1.5em;
}
.description {
margin: 20%;
width: 100%;
height: 180px !important;
margin: auto;
font-size: 20px;
}
.description p {
margin: 50px 0px;
}
.block {
position: relative;
/* margin:25vh auto;
width:50%;
min-width:320px;
min-height:320px; */
background: linear-gradient(0deg,#000,#262626);
color: #f2f2f2;
display: flex;
flex-direction: column;
justify-content: center;
}
.description:before,.description:after {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000,#ff0000);
background-size: 400%;
z-index: -1;
animation: shadow 20s linear infinite;
top: -8px;
left: -8px;
width: calc(100% + 8px);
height: calc(100% + 8px);
filter: blur(24px);
opacity: 0.9;
}
@keyframes shadow {
0% {
background-position: 0 0;
}
50.01% {
background-position: 200% 0;
}
100% {
background-position: 0 0;
}
}
<div class="description block shadow" id="myTypingText"></div>
我只是该Codepen的每一行代码,但是当我加载页面时,它看起来像这样:
如您所见,颜色和动画的确出现在div周围,实际上,它填充了div,而我不希望这样。
所以,如果您知道如何解决此问题,请告诉我,我真的很感谢你们的任何建议...
解决方法
您的CSS代码中的某些内容正在删除此属性:
.block {
/* ... */
background: linear-gradient(0deg,#000,#262626);
}
因此,在不删除/更改它的情况下,它必须看起来像这样:
#myTypingText {
width:700px;
height:120px;
padding:12px;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
line-height:1.5em;
}
.description{
margin: 20%;
width:100%;
height:180px !important;
margin:auto;
font-size:20px;
}
.description p{
margin:50px 0px;
}
.block {
position: relative;
/* margin:25vh auto;
width:50%;
min-width:320px;
min-height:320px; */
background: linear-gradient(0deg,#262626);
color:#f2f2f2;
display: flex;
flex-direction: column;
justify-content: center;
}
.description:before,.description:after{
content:'';
position: absolute;
top:-2px;
left:-2px;
width:calc(100% + 4px);
height:calc(100% + 4px);
background: linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000,#ff0000);
background-size: 400%;
z-index:-1;
animation: shadow 20s linear infinite;
top:-8px;
left:-8px;
width:calc(100% + 8px);
height:calc(100% + 8px);
filter:blur(24px);
opacity:0.9;
}
@keyframes shadow {
0% {
background-position: 0 0;
}
50.01% {
background-position: 200% 0;
}
100% {
background-position: 0 0;
}
}
/*
.block{
background-image: none;
background-color: rgba(255,255,0.2);
}
*/
<div class="description block shadow" id="myTypingText"></div>
如果我取消注释最后一条CSS规则,则会看到与您相同的效果:
#myTypingText {
width:700px;
height:120px;
padding:12px;
font-family:Arial,#ff0000);
background-size: 400%;
z-index:-1;
animation: shadow 20s linear infinite;
top:-8px;
left:-8px;
width:calc(100% + 8px);
height:calc(100% + 8px);
filter:blur(24px);
opacity:0.9;
}
@keyframes shadow {
0% {
background-position: 0 0;
}
50.01% {
background-position: 200% 0;
}
100% {
background-position: 0 0;
}
}
.block{
background-image: none;
background-color: rgba(255,0.2);
}
<div class="description block shadow" id="myTypingText"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。