所以我的任务是在有纹理的背景上创建长阴影。网上的其他教程都是如何在坚实的背景下完成这项工作的,这种背景在纹理或图像上看起来非常糟糕。
我非常接近它,尝试了一些不同的技术,但我得出了两种可能性,每种都有问题,所以如果有人能帮助我调试其中一种,我将不胜感激。这些不是跨浏览器的,我只是想知道它是否可行,所以请忽略缺少前缀等。
类型1:纯CSS使用CSS中的Skew选项,我可以在左侧和底部添加两个带有渐变的块。然后每倾斜45度,我就接近了想要的效果,但在阴影不完全相交的地方之间有一条线,我无法在没有重叠的情况下离开:http://jsfiddle.net/mfeola/4bfrkagu/
.block:before, .block:after{
content:"";position:absolute; display:block;
}
.block:before{top:0; left:100%; height:100%; width:0; padding-right:100%;
transform-origin: 0% 0%;
transform: skew(0deg, 45deg);
background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);
}
.block:after{top:100%; left:0; width:100%; height:0; padding-top:100%;
transform-origin: 0% 0%;
transform: skew(45deg, 0deg);
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);
}
类型2:Javascript通过计算旋转数学,我能够旋转一个梯度框来生成一个完美的阴影。问题是,如果盒子的大小改变了,阴影的角度也改变了,这对我想要做的事情不起作用。我希望它能通用。当我计算数学时,我在这个上面包含了一个文本区域:http://jsfiddle.net/mfeola/tpdhLqs1/
您可以尝试添加边界渐变来填补空白。
正在通过此链接进行尝试:https://css-tricks.com/examples/GradientBorder/
无法获得正确的确切颜色,但我认为您应该能够使用以下边界渐变格式来做到这一点:
.top-to-bottom {
border-right: 0 !important;
border-left: 0 !important;
border-top: 0 !important;
border: 1px solid;
-webkit-border-image:
-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,1))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%;
-moz-border-image:
-moz-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%;
-o-border-image:
-o-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%;
border-image:
linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%;
}
在这里有点乱:http://jsfiddle.net/4bfrkagu/13/但无法正确着色-我想我可以把它留给你。