css怎么写兼容 |print css 套打

/* 通用的盒子样式*/
.box{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
background-color: blue;
border: 1px solid black;
}
/* 使用 Flexbox */
.box{
display: -webkit-box;  /* Safari/老版本Chrome */
display: -moz-box; /*老版本 Firefox*/
display: -ms-flexbox; /* Internet Explorer 10 */
display: -webkit-flex; /*新版Chrome*/
display: flex; /* 好的写法*/
-webkit-box-pack: center; /* Safari/老版本 Chrome */
-moz-box-pack: center; /* 老版本 Firefox */
-ms-flex-pack: center; /* IE 10 */
-webkit-justify-content: center; /* 新版 Chrome */
justify-content: center; /* 好的写法 */
-webkit-box-align: center; /* Safari/老版本 Chrome */
-moz-box-align: center; /* 老版本 Firefox */
-ms-flex-align: center; /* IE 10 */
-webkit-align-items: center; /* 新版 Chrome */
align-items: center; /* 好的写法 */
}
/* 使用不透明度 */
.opacity{
opacity: 0.5;
filter: alpha(opacity=50); /* IE 8 及更早版本 */
}
/* 设置文本阴影 */
.shadow{
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 10px 10px 5px #888888; /* FF3.5 - 3.6 */
box-shadow: 10px 10px 5px #888888; /* 好的写法 */
}

在进行实际编写时，通过使用前缀(prefix)是常用的技巧，它可以确保代码能够运行在不同的浏览器上。为此，可以使用工具，例如Autoprefixer或在线工具，这些工具可以自动添加前缀。还可以通过查看浏览器支持的某个属性的最小版本来确定是否需要添加前缀。