我有一个元素,我希望它的一端有阴影重音,就像这样(来自 Photoshop):
我得到的最接近的是这样的(HTML + CSS3):
那么,是否有可能像第一张图片那样让阴影变淡?这是我的代码:
box-shadow: 0px 0px 5px 1px rgba(0,0,0,.4);
最佳答案
确实可以只用 CSS 实现这种效果,但 CSS 是令人费解的:
.container {
background-color: rgba(168,214,255,1);
padding: 20px;
}
.tab {
height: 50px;
background-color: #4790CE;
margin-bottom: 10px;
border-radius: 20px;
position: relative;
}
.tab.active {
background-color: #63B6FF;
border-radius: 20px 0 0 20px;
box-shadow: 0 0 15px #3680BD;
}
.tab .shadow {
position: absolute;
top: -10px;
left: 50px;
right: -20px;
bottom: -10px;
border-radius: 20px;
background-color: transparent;
-webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(168,214,255,0)), color-stop(80%,rgba(168,214,255,1))) 50 50 stretch;
border-width: 10px 20px 10px 0;
}
您基本上使用 border-image 来遮盖阴影。您可以通过 :after 伪选择器在没有额外标记的情况下实现这一点,但是 :after 不能很好地处理动画。
在 jsfiddle 上查看演示(仅限 Webkit,但您可以轻松地将其适配到 FF。不幸的是,IE9 就不行了)。
关于html - CSS 框阴影 : Only apply to part of an element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6170065/