html - Box-shadow 正在从图像中截断
问题描述
图像应如下所示。
box-shadow 添加到代码中: 图片
相反,它看起来像这样,我不知道为什么以及如何修复它。图片
您可以看到 box-shadow 在图像的所有 4 个面上都被切断了。
如何修复它以使图像不会被切断?
代码:https ://jsfiddle.net/8mgvn40u/
.curtain {
width: 550px;
height: 250px;
border-radius: 20px;
position: relative;
overflow: hidden;
background: #000000;
box-sizing: border-box;
}
.jacketa {
position: absolute;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
box-shadow: 0 0 20px 2px #f9066bf7;
}
.jacketa .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.jacketa .coversvg {
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
}
.jacketa .coversvg .back {
stroke: #000;
opacity: 0.15;
}
.jacketa .coversvg .front {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
@keyframes draw {
100% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes flicker-1 {
0%,
100% {
opacity: 1;
}
41.99% {
opacity: 1;
}
42% {
opacity: 0;
}
43% {
opacity: 0;
}
43.01% {
opacity: 1;
}
47.99% {
opacity: 1;
}
48% {
opacity: 0;
}
49% {
opacity: 0;
}
49.01% {
opacity: 1;
}
}
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 180px;
height: 180px;
margin: auto;
border-radius: 50%;
transition: 0.5s ease;
}
.j1 {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
}
.j2 {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
}
.j2 .jacketa {
right: 0;
left: auto;
}
.curtain:hover .j1 {
transform: translateX(-500%);
}
.curtain:hover .j2 {
transform: translateX(500%);
}
<div class="curtain">
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>
解决方案
由于溢出,bow-shadow
被截断(已经说过),您还可以使用变换轻松地将阴影保持在可见区域内。
首先增加隐藏的溢出区域,然后减少里面的内容。更小它不会再被剪裁了。
这个想法的例子有一个简短的固定涉及:transform:scale(1.1)
VStransform:scale(0.9)
保持初始布局大小的接近比例。
.curtain {
width: 550px;
height: 250px;
border-radius: 20px;
position: relative;
overflow: hidden;
background: #000000;
box-sizing: border-box;
}
.split-wrap{
transform:scale(1.1);
}
.jacketa {
position: absolute;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
box-shadow: 0 0 20px 2px #f9066bf7;
transform:scale(0.9);
}
.jacketa .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.jacketa .coversvg {
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
}
.jacketa .coversvg .back {
stroke: #000;
opacity: 0.15;
}
.jacketa .coversvg .front {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
@keyframes draw {
100% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes flicker-1 {
0%,
100% {
opacity: 1;
}
41.99% {
opacity: 1;
}
42% {
opacity: 0;
}
43% {
opacity: 0;
}
43.01% {
opacity: 1;
}
47.99% {
opacity: 1;
}
48% {
opacity: 0;
}
49% {
opacity: 0;
}
49.01% {
opacity: 1;
}
}
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 180px;
height: 180px;
margin: auto;
border-radius: 50%;
transition: 0.5s ease;
}
.j1 {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
}
.j2 {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
}
.j2 .jacketa {
right: 0;
left: auto;
}
.curtain:hover .j1 {
transform: translateX(-500%);
}
.curtain:hover .j2 {
transform: translateX(500%);
}
<div class="curtain">
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>
推荐阅读
- laravel - 使用 Lumen 发送邮件
- html - 输入框值不应超过 100,但它正在使用且不在表单中
- node.js - 从服务器超时发出nodejs请求
- node.js - 在 Visual Studio 中构建 Cordova 项目时出错
- stackdriver - 用于 OracleDB 的 Google Stackdriver 数据库代理?
- c# - 如何在 GetResponse 中检查 HttpStatusCode.OK
- javascript - Safari 调用 decodeAudioData 错误,在 Chrome 工作的地方出现 null
- ios - Apple 说“您的 iOS 分发证书即将到期”我需要做什么
- angular - 添加推送通知的 Ionic 3 问题
- javascript - 在谷歌地图javascript api中的两个特定标记上放置标签