框阴影作为带有css的渐变边框？

Question

我想要我的可移动 div 元素周围的阴影边框 á la windows 10。 它可以用 box-shadow 来完成

  <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 以侦听鼠标悬停，它不会在阴影区域检测到任何内容，但只有当您在元素内移动鼠标。 在我的（触摸）应用程序中，我让用户移动和调整元素的大小，因此我需要在元素周围有一个相当宽的可触摸区域以方便抓取。 在我看来，宽的不透明边框看起来很笨拙。

我见过很多使用边框图像和线性渐变的例子，但是我还没有设法模仿 box-shadows/windows 10 边框的外观。

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

Answer 1

这只能通过将 div 框包装在另一个中来实现。

在这里，我将 span 与 class 一起使用，并将 box 包装起来，将mouse:move属性赋予 span 类，而不是将其赋予 box，将 padding 赋予 span 类，这样它就会在box-shadhow存在的地方留下一些空间。

所以看起来你在阴影上徘徊，但实际上它覆盖到你悬停在盒子上并感觉你悬停在盒子上。

演示

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;
}