如何在元素的一侧添加框影?

小开

最佳答案

是的，你可以使用box-shadow规则的阴影扩展属性:

.myDiv
{
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

The fourth property there -2px is the shadow spread, you can use it to change the spread of the shadow, making it appear that the shadow is on one side only.

This also uses the shadow positioning rules 10px sends it to the right (horizontal offset) and 0px keeps it under the element (vertical offset.)

5px is the blur radius :)

Example for you here.

小开

这是我做的一个小技巧。

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div>

在我想要创建单面框阴影的元素的正下方创建一个<div class="one_side_shadow"></div>(在这种情况下，我想为id="element"创建一个单面插入阴影，来自底部)

然后我创建了一个常规的box-shadow，使用负的垂直偏移量将阴影向上推到一侧。

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

小开

我自制的解决方案很容易编辑:

HTML:

<div id="anti-shadow-div">
<div id="shadow-div"></div>
</div>

css:

#shadow-div{
margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
margin-left:0px; /* Set to 20px if you want shadow at the left side */
margin-top:0px; /* Set to 20px if you want shadow at the top side */
margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
box-shadow: 0px 0px 20px black;
height:100px;
width:100px;
background: red;
}


#anti-shadow-div{
margin:20px;
display:table;
overflow:hidden;
}

< p >演示:< br > http://jsfiddle.net/jDyQt/103 < / p >

小开

这可能是一个简单的方法

border-right : 1px solid #ddd;
height:85px;
box-shadow : 10px 0px 5px 1px #eaeaea;

将此分配给任何div

小开

以下是我的例子:

.box{
        

width: 400px;
height: 80px;
background-color: #C9C;
text-align: center;
font: 20px normal Arial, Helvetica, sans-serif;
color: #fff;
padding: 100px 0 0 0;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}

<div class="box">
</div>

小开

这个网站帮助了我: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>

小开

div {
border: 1px solid #666;
width: 50px;
height: 50px;
-webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

小开

为了获得最多两面的剪裁效果，你可以使用带有背景渐变的伪元素。

header::before, main::before, footer::before, header::after, main::after, footer::after {
display:    block;
content:    '';
position:   absolute;
width:      8px;
height:     100%;
top:        0px;
}


header::before, main::before, footer::before {
left:       -8px;
background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}


header::after, main::after, footer::after {
right:      -8px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

将在通常组成文档的元素的左右添加一个漂亮的阴影效果。

小开

我要做的是为阴影创建一个垂直块，并将它放在我的块元素应该在的地方。然后这两个块被包装成另一个块:

<div id="wrapper">
<div id="shadow"></div>
<div id="content">CONTENT</div>
</div>


<style>


div#wrapper {
width:200px;
height:258px;
}


div#wrapper > div#shadow {
display:inline-block;
width:1px;
height:100%;
box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}


div#wrapper > div#content {
display:inline-block;
height:100%;
vertical-align:top;
}


</style>

jsFiddle实例在这里。

小开

只需使用::after或::before伪元素来添加阴影。使它1px，并把它放在你想要的任何一边。下面是顶部的例子。

footer {
margin-top: 50px;
color: #fff;
background-color: #009eff;
text-align: center;
line-height: 90px;
position: relative;
}


footer::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
top: 0;
left: 0;
z-index: -1;
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>

小开

好的，再试一次。使用伪元素并在其上应用阴影盒属性。

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

< a href = " https://codepen。io/alex3o0/pen/PrMyNQ" rel="nofollow noreferrer">https://codepen.io/alex3o0/pen/PrMyNQ

小开

下面是为每一方演示的codepen，或工作代码片段:

.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>

小开

clip-path现在(2020)是在元素的特定侧面实现盒影的最简单的方法之一，特别是当需要的效果是“干净的切割”;特定边缘的阴影(我相信这是OP最初寻找的)，像这样:

.shadow-element {
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}

<div class="shadow-element"></div>

...as opposed to an attenuated/reduced/thinning shadow like this:

.shadow-element {
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}

<div class="shadow-element"></div>

Simply apply the following CSS to the element in question:

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Tpx Rpx Bpx Lpx);

地点:

Tpx设置上边缘的阴影可见性
Rpx正确
Bpx底部
Lpx左

为任何应该隐藏阴影的边输入一个值0，为任何应该显示阴影的边输入一个负值(与盒影模糊半径- Xpx相同)。