css3有检测效果的

CSS3是一种能够使网页更加美观和优化的技术，它提供了许多的新特性和改进。而有些CSS3属性只能适用于现代浏览器，但要确保兼容性，则需要进行一些检测效果。

  
  /*判断是否支持CSS3属性*/
  @supports (属性名称: 属性值){
    /*你的样式代码*/
  }

  /*兼容Firefox*/
  body {
    animation: myanimation 2s infinite;
    -moz-animation: myanimation 2s infinite;
  }

  /*兼容Safari 和 Chrome*/
  body {
    animation: myanimation 2s infinite;
    -webkit-animation: myanimation 2s infinite;
  }
  

上面的代码使用了@supports语法来判断浏览器是否支持该CSS3属性。如果支持，则执行样式代码；如果不支持，则忽略这些样式代码。

同时在兼容FireFox和Safari/Chrome两种浏览器的CSS3属性时，需要使用各自私有前缀的语法，否则会出现样式错误或者完全无法生效的情况。

总的来说，要确保网站的兼容性和用户体验，我们必须在使用CSS3属性时，优先考虑检测效果和加入兼容性代码的工作。 当然，随着浏览器技术的发展，这更显得十分重要。