首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

检查-moz-border-radius支持的最佳方法

检查-moz-border-radius支持的最佳方法是使用JavaScript和CSS。首先,在CSS中添加一个类,该类将应用于支持-moz-border-radius的浏览器。然后,使用JavaScript检测浏览器是否支持该类。

在CSS中添加以下代码:

代码语言:css
复制
.supports-border-radius {
  border-radius: 5px;
  -moz-border-radius: 5px;
}

在JavaScript中添加以下代码:

代码语言:javascript
复制
function supportsBorderRadius() {
  var div = document.createElement('div');
  div.style.borderRadius = '5px';
  div.style.MozBorderRadius = '5px';
  div.style.width = '10px';
  div.style.height = '10px';
  document.body.appendChild(div);
  var supports = div.offsetWidth === 10;
  document.body.removeChild(div);
  return supports;
}

if (supportsBorderRadius()) {
  document.documentElement.classList.add('supports-border-radius');
}

这段代码首先创建一个div元素,并设置其border-radius和-moz-border-radius属性。然后,它将div元素添加到页面上,并检查div元素的宽度是否为10像素。如果是,则说明浏览器支持-moz-border-radius,并将supports-border-radius类添加到根元素上。

这种方法可以确保您的网站在支持-moz-border-radius的浏览器上具有圆角效果,而不会在不支持该属性的浏览器上出现问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Fluid -33- 添加书信人偶动画效果

    body, div, h1,h2, form, fieldset, footer,p { margin: 0; padding: 0; border: 0; outline: none; } body { color: #7c7873; font-family: 'YanoneKaffeesatzRegular'; background-color: #D7D7D7; } p {text-shadow:0 1px 0 #fff;} #wrap {width:530px; margin:20px auto 0; } h1 {margin-bottom:20px; text-align:center;font-size:48px; text-shadow:0 1px 0 #ede8d9; } #form_wrap { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap:before {content:""; position:absolute; bottom:128px;left:0px; background:url('https://101.43.39.125/HexoFiles/images/before.png'); width:530px;height: 316px;} #form_wrap:after {content:"";position:absolute; bottom:0px;left:0; background:url('https://101.43.39.125/HexoFiles/images/after.png'); width:530px;height: 260px; } #form_wrap.hide:after, #form_wrap.hide:before {display:none; } #form_wrap:hover {height:806px;top:-30px;} form {background:#f7f2ec url('https://101.43.39.125/HexoFiles/images/letter_bg.png'); position:relative;top:200px;overflow:hidden; height:200px;width:400px;margin:0px auto;padding:20px; border: 1px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; -moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff; -webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap:hover form {height:530px;} label { margin: 11px 20px 0 0; font-size: 16px; color: #b3aba1; text-transform: uppercase; text-shadow: 0px 1px 0px #fff; } #form_wrap input[type=submit] { position:relative;font-family: 'YanoneKaffeesatzRegular'; font-size:24px; color: #7c7873;text-shadow:0 1px 0

    02
    领券