下面是完整代码，实现图示效果，效果为出现四个白框，和去除黑色背景。
<!-- 了解更多模块 --><!DOCTYPE html><html><head><style type="text/css">body{background-color: #D0D0D0;}.knowmorbutton{width: 100px;height: 40px;position: relative;background-color: #000000;box-shadow:0px 0px 60px 0.5px #d0d0d0;}.knowmorbutton:hover{cursor:pointer;background:transparent;}.know-top{position: absolute;right: 0px;top: 0px;width: 0px;height: 5px;background-color: #FFFFFF;transition: all 0.2s;}.know-left{position: absolute;top: 0px;left: 0px;width: 5px;height: 0px;background-color: #FFFFFF;}.knowmorbutton:hover .know-left{height: 35px;transition: all 0.2s;cursor:pointer;}.know-right{position: absolute;bottom: 0px;right: 0px;width: 5px;height: 0px;background-color: #FFFFFF;}.knowmorbutton:hover .know-right{cursor:pointer;height: 35px;transition: all 0.2s;}.knowmorbutton:hover .know-left{height: 35px;transition: all 0.2s;}.knowmorbutton:hover .know-top{cursor:pointer;width: 100px;}.know-bottom{position: absolute;left: 0px;bottom: 0px;width: 0px;height: 5px;background-color: #FFFFFF;transition: all 0.2s;}.knowmorbutton:hover .know-bottom{width: 100px;}.knowmore{color: #FFFFFF;position: relative;text-align: center;top: 7px;}</style><meta charset="utf-8"><title></title></head><body></div><!-- 了解更多模块 --><div class="knowmorbutton"><div class="know-top"></div><div class="know-left"></div><div class="know-right"></div><div class="know-bottom"></div></div></div><!-- 了解更多模块 --></div></body></html><!-- 了解更多模块 -->
虽然代码看着很长其实原理很简单，使用子类选择器，在.knowmorbutton盒子悬停的同时，让四个盒子出来就行；
四个盒子分别使用绝对定位，定位到四个角，两个不给宽度，两个不给长度。
然后在悬停父类knowbuttton，清除阴影我用的是backgroune:transparent；
核心思想是悬停父类，触发子类效果。定位父相子绝，不影响布局。
