如何使框阴影可点击

Question

我的屏幕上有一些带有框阴影的文字。该文本链接到外部网站。但是，我只能单击实际文本转到外部链接。如何使框阴影也可以点击，以便我也可以按下文本框阴影上的任何位置，并使链接仍然有效。

Answer 1

它是硬编码的，因此无法获得完美的解决方案，但您仍然可以尝试这样的事情。

.outer {
    display:block;
    width:100px;
    padding: 2px 6px 6px 2px; 
 /* The 6px is for right and bottom as they have more shadow 2px is for top and left*/
    height:auto;
    cursor:pointer;
}
.inner {
    margin:0px;
    display:block;
    height:50px;
    width:100px;
    box-shadow:2px 2px 10px #333;
}

<div class='outer'>
    <div class="inner"></div>
</div>

Answer 2

您可以绘制宽度和高度更大的外框。并给他们ancher标签。

HTML

<a href="http://google.com">
    <div class='outer-box'>
    <div class="box"></div>
    </div>
</a>

CSS

 .outer-box{
        width:120px;
        height:120px;    
        display: inline-block;
    }.box{
        width:100px;
        height:100px;
        color:green;
        box-shadow: 10px 10px 5px #888888;
    }

Answer 3

据我所知，这是不可能的。 虽然你可以使用一类阴影制作div并正确设计它，然后使其可点击。