我需要在一些块元素上创建一个box-shadow，但只是(例如)在它的右侧。我的方法是用box-shadow将内部元素包装成带有padding-right和overflow:hidden的外部元素;所以阴影的其他三面是不可见的。
有没有更好的方法来实现这个目标?喜欢box-shadow-right吗?
编辑:我的意图是只创建阴影的垂直部分。与规则background:url(shadow.png) 100% 0% repeat-y完全相同。
当前回答
以下是我的例子:
.box { 宽度:400 px; 身高:80 px; background - color: # C9C; text-align:中心; 字体:20px normal Arial, Helvetica, sans-serif; 颜色:# fff; 填充:100px 00 0; -webkit-box-shadow: 0 8px 6px黑色; -moz-box-shadow: 0 8px 6px黑色; Box-shadow: 0 8px 6px -6px黑色; ｝ < div class = "盒子" > < / div >
其他回答
好的，再试一次。使用伪元素并在其上应用阴影盒属性。
html:
<div class="no-relevant-box">
<div class="div-to-shadow-1"></div>
<div class="div-to-shadow-2"></div>
</div>
萨斯:
.div-to-shadow-1, .div-to-shadow-2
height: 150px
width: 150px
overflow: hidden
transition: all 0.3s ease-in-out
&::after
display: block
content: ''
position: relative
top: 0
left: 100%
height: 100%
width: 10px
border: 1px solid mediumeagreen
box-shadow: 0px 7px 12px rgba(0,0,0,0.3)
&:hover
border: 1px solid dodgerblue
overflow: visible
https://codepen.io/alex3o0/pen/PrMyNQ
这个网站帮助了我:https://gist.github.com/ocean90/1268328(注意，在这个网站上，左边和右边是颠倒的，因为这篇文章的日期…但它们能正常工作)。它们在下面的代码中进行了更正。
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<style>
.box {
height: 150px;
width: 300px;
margin: 20px;
border: 1px solid #ccc;
}
.top {
box-shadow: 0 -5px 5px -5px #333;
}
.right {
box-shadow: 5px 0 5px -5px #333;
}
.bottom {
box-shadow: 0 5px 5px -5px #333;
}
.left {
box-shadow: -5px 0 5px -5px #333;
}
.all {
box-shadow: 0 0 5px #333;
}
</style>
</head>
<body>
<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>
<div class="box all"></div>
</body>
</html>
是的，你可以使用box-shadow规则的阴影扩展属性:
.myDiv { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 10px 0 5px -2px #888; ｝ < div class = " myDiv " > < / div >
第四个属性-2px是阴影的扩展，你可以用它来改变阴影的扩展，使它看起来只在一边。
这也使用了阴影定位规则10px将其发送到右侧(水平偏移量)，0px将其保持在元素下方(垂直偏移量)。
5px是模糊半径:)
举个例子。
只需使用::after或::before伪元素来添加阴影。使它1px，并把它放在你想要的任何一边。下面是顶部的例子。
页脚{ margin-top: 50 px; 颜色:# fff; background - color: # 009 eff; text-align:中心; 行高:90 px; 位置:相对; ｝ 页脚:{后 内容:”; 位置:绝对的; 宽度:100%; 身高:1 px; 上图:0; 左:0; z - index: 1; Box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75); ｝ <footer> . </footer> .
以下是为每一方演示的代码依赖，或工作片段:
.boxes { display: flex; flex-wrap: wrap; } .box { margin: 20px; border: 1px solid #ccc; font-family: Helvetica Neue, Arial, sans-serif; font-weight: 100; letter-spacing: 2px; color: #999; display: flex; align-items: center; justify-content: center; text-align: center; flex: 1; padding: 40px; line-height: 1.4em; } .top { box-shadow: 0 -5px 5px -5px #333; } .right { box-shadow: 5px 0 5px -5px #333; } .bottom { box-shadow: 0 5px 5px -5px #333; } .left { box-shadow: -5px 0 5px -5px #333; } <div class="boxes"> <div class="box top">Top Only</div> <div class="box right">Right Only</div> <div class="box bottom">Bottom Only</div> <div class="box left">Left Only</div> </div>
