[分享]css兼容safari浏览器

随着移动互联网的快速发展，越来越多的人开始使用safari浏览器来浏览网页，所以保证网页在safari浏览器上的兼容性是非常重要的。而对于开发人员而言，保证网页在safari浏览器上的兼容性，也就意味...

随着移动互联网的快速发展，越来越多的人开始使用safari浏览器来浏览网页，所以保证网页在safari浏览器上的兼容性是非常重要的。

而对于开发人员而言，保证网页在safari浏览器上的兼容性，也就意味着需要掌握一些css的技巧。

下面，我来介绍一些css兼容safari浏览器的技巧：

/* 1. webkit前缀：safari浏览器使用的是webkit引擎，所以需要添加webkit前缀 */
.box {
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

/* 2. 文本长度溢出：当文本长度超过一定长度时，会自动省略，需要添加-webkit-line-clamp属性 */
.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

/* 3. 弹性盒模型：safari浏览器对flex布局支持不太好，需要使用-webkit-box */
.container {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

/* 4. 渐变背景：safari浏览器支持渐变背景，但需要加-webkit-前缀 */
.background {
  background: -webkit-gradient(linear,left top,right top,from(#4bb7e3),to(#b2dcff));
  background: linear-gradient(to right, #4bb7e3, #b2dcff);
} 

以上是我分享的一些css技巧，可以帮助大家在safari浏览器上让网站更流畅，更美观。