Question

我希望在我的可移动div元素周围有窗口10的阴影边框。它可以用像

这样的盒子阴影来完成

  <style>
     .box {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
        cursor: move;

        background-color: green;
        box-shadow: 0px 0px 20px 10px #ccc;
     }

     .box2 {
        left: 200px;
        top: 200px;

        background-color: blue;
     }

  </style>

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

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

缺点是阴影不是div元素的一部分，与边框的方式相同，所以如果你将一个事件监听器附加到div来监听鼠标悬停，它将不会在阴影区域中检测到任何东西，但是仅当您在元素内移动鼠标时。在我的（触摸）应用程序中，我让用户移动并调整元素的大小，因此我需要在元素周围有一个相当宽的可触摸区域以方便抓取。在我看来，一个宽大的不透明边框看起来很笨拙。

我见过许多使用边框图像和线性渐变的例子，但是我还是无法模仿框阴影/窗口10边框的外观。

有没有办法用边框图像或任何其他不太复杂的方式来做到这一点？

Answer 1

只有将div框包装在另一个div框中才能实现。

这里我使用span类和包装框，使mouse:move属性跨越类，而不是将其赋予框和填充以跨越类，因此它会留下box-shadhow存在的空间。

所以看起来你正徘徊在阴影上，但实际上它是你的悬崖上的盖子，感觉你在盒子上盘旋。

DEMO

<强> HTML

<span class="cover"><div class="box"></div></span>
<span class="cover2"><div class="box"></div></span>

<强> CSS

.box 
{
    display:block; 
    box-shadow: 0px 0px 20px 10px #ccc;
    height:100%;
    width:100%;
}

.cover
{    
    display:block;       
    cursor: move;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    padding:15px; /* This is the trick */
}

.cover2
{
    display:block;       
    cursor: move;
    position: absolute;
    top: 200px;
    left: 200px;
    width: 200px;
    height: 200px;
    padding:15px; /* This is the trick */
}

.cover .box
{
    background-color: green;
}

.cover2 .box
{
    background-color: blue;
}

框阴影作为与CSS的渐变边界？

1 个答案: