浏览器简单适配
# 浏览器适配
- -o-：Opera浏览器
- -ms-：IE浏览器
- -moz-：Firefox浏览器
- -webkit-：Chrome、Safari、Android浏览器
```css
径向渐变
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: -webkit-radial-gradient(red, yellow);
}
倒影
-webkit-box-reflect: below | above | left | right;
```
二 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浏览器适配</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border-radius: 50%;
font: 900 80px/200px 'STSong';
text-align: center;
/*径向渐变*/
/*background-image: radial-gradient(red, yellow, green);*/
background-image: -webkit-radial-gradient(left, red, yellow, green);
/*倒影*/
/*below | above | left | right*/
-webkit-box-reflect: below 2px;
}
</style>
</head>
<body>
<!-- -o- Opera -->
<!-- -ms- IE -->
<!-- -moz- FireFox -->
<!-- -webkit- Safari Chrome 国内主流浏览器 Android内置浏览器 -->
<div class="box">123</div>
</body>
</html>
