Question

<div class="myContainer">
Some text...
</div>

现在我只想在元素的左侧和顶部上创建一个box-shadow。我怎么能这样做？

我试过了：

.myContainer {
   box-shadow: 10px 10px 5px #888888;
}

但这不起作用。

Answer 1

您可以使用负值进行定位。

.halves{
  display: flex;
  border: 5px solid red;  
  .half{
    flex: 1;
    border: 10px solid yellow;
     align-items: stretch; 
    display: flex;    

    .half-inner{
      max-width: 100px;
      flex: 1;

      &.is-right{
        margin-left: auto;
        background: pink;
      }      
      &.is-left{
        background: green;
      }

    }
  }
}

使用CSS3生成器进行试用，例如this one

请记住还要包含供应商特定的前缀，以确保跨浏览器兼容性。

box-shadow: -10px -10px 5px 0px #888888;

您可以使用此jsfiddle

查看

如果您想了解有关-webkit-box-shadow: -10px -10px 5px 0px #888888; -moz-box-shadow: -10px -10px 5px 0px #888888;财产的更多信息，请查看MDN box-shadow

Answer 2

这应该有效：

div
{
  width:400px;
  height:400px;
  left:45px;
  box-shadow:-10px -5px 4px #ccc;
}

Answer 3

像这样，请看小提琴：https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/25/

第一个数字 - 是水平位置（负数是左，右是右）

第二个数字 - 是垂直位置（负向上，正向下）

第3个数字 - 是模糊半径

第4个数字 - 是传播半径

  -webkit-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);

HTML

<div class="someDiv"></div>

CSS

.someDiv {
  width: 400px;
  height: 400px;
  background-color: lightblue; 
  margin-left: 50px;
  margin-top: 50px;
  -webkit-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
}

Answer 4

试试这个

  File "/home/ymorin007/.virtualenvs/dvotedfan/lib/python2.7/site-packages/django_resized/forms.py", line 47, in save
    thumb.save(new_content, format=img.format, quality=self.field.quality, **img.info)
  File "/usr/local/lib/python2.7/site-packages/PIL/Image.py", line 1439, in save
    save_handler(self, fp, filename)
  File "/usr/local/lib/python2.7/site-packages/PIL/JpegImagePlugin.py", line 471, in _save
    ImageFile._save(im, fp, [("jpeg", (0,0)+im.size, 0, rawmode)])
  File "/usr/local/lib/python2.7/site-packages/PIL/ImageFile.py", line 476, in _save
    fh = fp.fileno()
UnsupportedOperation: fileno

div{
  width:200px;
    height:200px;
  background-color:red;
  margin:50px;
  box-shadow:-10px -5px 4px #ccc;
  }

盒子阴影 - 仅限顶部和左侧

4 个答案: