边框上的框阴影

问题描述 投票:4回答:5

我有这个问题,我想要一个边框和一个盒子阴影,但阴影必须在边界上。

box-shadow属性在边框结束时开始,是否可以在边框上移动?

.border
{       
    border: solid rgba(128,42,42,.98) 16px;
}


.img-box-shadow
{
    -moz-box-shadow: 0px 0px 20px #000000;
    -webkit-box-shadow: 0px 0px 20px #000000;
    box-shadow: 0px 0px 20px #000000;
}

我的HTML:

<img class="border img-box-shadow" src="img.png">

已经尝试插入我的盒子阴影,但它没有用!

我正在寻找这种效果:

我得到了这个结果:

html css css3
5个回答
4
投票

我认为使用两个重叠的框阴影可以更容易地实现这一点

like this接近你正在寻找的东西

box-shadow: 0 0 20px 5px #000000,
    0 0 0 16px rgba(128,42,42,.98);

0
投票

好像你想要一个inset盒子阴影,然后你可以使用:

box-shadow: inset 0 -15px 10px -10px #444;
-moz-box-shadow: inset 0 -15px 10px -10px #444;
-webkit-box-shadow: inset 0 -15px 10px -10px #444;

Fiddle Demo


0
投票

这个怎么样?

.ds-bottom {
  position:relative;
  overflow:hidden; 
  border-bottom:1px solid #ddd; 
}
.ds-bottom:before {
  content: ""; 
  position:absolute; 
  z-index: 1; 
  width:96%;  
  bottom: -10px; 
  height: 10px; 
  left: 2%; 
  border-radius: 100px / 5px; 
  box-shadow:0 0 18px rgba(0,0,0,0.6); 
}

0
投票

您可以尝试使用插入然后降低边框的Alpha值。它可能不完全是你想要的,但它很接近。

.border
{       
    border: solid rgba(128,42,42,.5) 4px;
}


.img-box-shadow
{
    -moz-box-shadow: inset 0px 0px 20px #000000;
    -webkit-box-shadow: inset 0px 0px 20px #000000;
    box-shadow: inset 0px 0px 20px #000000;
}

替代选项(从this question借来)。不要使用.border并使用它(你可以使用像素值):

.img-box-shadow
    {
        box-shadow: rgba(0,0,0,.98) 0px 0px 3px, inset rgba(0,0,0,.98) 0px -2px 3px;
    }

这是一个JSFiddle


0
投票

首先,你有盒子阴影格式的错误。

 box-shadow: 0px 0px 20px #000000;

改成

box-shadow: 0px 0px 20px 0 #000000;

由于Box Shadow Properties的格式正确

box-shadow:水平长度垂直长度blur-radius spread-radius;

接下来,为了使其符合您的要求,您必须将图像包装在div中。 Box-shadow不会在边境上工作。

这是风格

div { 
  display:inline-block;
  padding:4px; /* Act as border width */
  background:rgba(128,42,42,.98); /* Act as border color */
}

.img-box-shadow
{
  box-shadow: inset 0px 0px 20px 0 #000000;
  -webkit-box-shadow: inset 0px 0px 20px 0 #000000;
  -moz-box-shadow: inset 0px 0px 20px 0 #000000;
}

和HTML标记

<div class="img-box-shadow">
<img src="http://graph.facebook.com/715380382/picture?type=large">
</div>

查看现场演示http://jsbin.com/hex/1/edit

© www.soinside.com 2019 - 2024. All rights reserved.