[分享]css兼容谷歌浏览器代码

在现代的Web开发中，如何让我们的网站在谷歌浏览器中正确地显示CSS样式？针对这个问题，我们需要使用一些CSS兼容性代码来解决这个问题。/ 谷歌浏览器CSS兼容性代码 / webkitboxsizin...

在现代的Web开发中，如何让我们的网站在谷歌浏览器中正确地显示CSS样式？针对这个问题，我们需要使用一些CSS兼容性代码来解决这个问题。

/* 谷歌浏览器CSS兼容性代码 */
-webkit-box-sizing: border-box; /*规定元素的盒子模型*/
-moz-box-sizing: border-box; /*规定元素的盒模型*/
box-sizing: border-box; /*规定元素的盒子模型*/

-webkit-appearance:none; /*规定应该为元素应用的默认样式*/

-webkit-font-smoothing: antialiased; /*使字体更平滑*/
-moz-osx-font-smoothing: grayscale; /*使字体更平滑*/

/* CSS3中的渐变属性 */
background: -webkit-linear-gradient(top, #fff, #ccc);
background: -moz-linear-gradient(top, #fff, #ccc);
background: linear-gradient(to bottom, #fff, #ccc);

/* 文本阴影 */
text-shadow: 1px 1px 1px #ccc;

/* border-radius属性允许创建圆角*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

/* 文本溢出 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

/* 媒体查询 */
@media screen and (min-width: 480px) {
  body {
    color: #000;
    background-color: #fff;
  }
} 

上面的代码可以让我们的网站在谷歌浏览器上更好地展示CSS样式。当然，除了以上的代码，还有更多的CSS代码需要我们去掌握和使用。