如果支持框阴影，则隐藏边框

Hide border if box-shadow supported

本文关键字：隐藏 边框 阴影 支持 如果      更新时间：2023-11-29

我有一个带边框和框阴影的div：

div.my-div
{
    border: 1px solid #555;
    box-shadow: 0px 4px 35px rgba(0,0,0,0.5);
}

边框很难看，但对于不支持阴影的浏览器来说是必要的（div的背景与周围元素的颜色相同）。

如何检测浏览器是否支持框阴影，并删除框阴影？也许使用javascript？

编辑：我想在没有任何依赖项（如modernizr）的情况下完成此操作。

例如：

var boxShadowSupported = ???;
if (boxShadowSupported && typeof(document.getElementsByClassName) != 'undefined') {
  var elements = document.getElementsByClassName('my-div');
  for (var i= 0; i < elements.length; i++) {
    elements[i].setAttribute('style', 'border: 0;');
  }
}

您可以使用javascript:复选框shaddow浏览器支持

if ('boxShadow' in document.body.style ) 
{
    alert('I can support shadow!');
}

也许你可以试试这个：

var foo=document.createElement("div");
foo.style.boxShadow="0px 0px 0px rgb(0,0,0)";
document.body.appendChild(foo);
var boxShadowSupported=foo.style.boxShadow?1:0;
相关文章：