html - 如何使框阴影可点击

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

您可以绘制具有更大宽度和高度的外箱。并给他们锚标签。

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 并正确设置它的样式，然后使其可点击。