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

我想在我的可移动div元素周围的阴影边框窗口10。它可以用的box-shadow来完成像框阴影作为渐变边界与CSS？

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

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

有没有办法做到这一点与边界图像或以任何其他不是过于复杂的方式吗？

来源

2015-09-09 user1453235

发布我的回答如下，没它帮助？ – divy3993

恐怕在盒子周围使用包装纸会过于复杂，需要计算它们之间的坐标以便在盒子周围移动 – user1453235

是的，它并不复杂，但据我所知不是很复杂可能。仍然等待，如果你得到一些更好的答案。 – divy3993

只有将div盒包装在另一个盒子中才有可能。

这里我使用带班跨度和包装盒给人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; 
}

来源

2015-09-09 18:37:51 divy3993

@ user1453235它对你有用吗？ – divy3993

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

回答

相关问题