浏览器兼容
```<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.box{margin:100px;width:200px;height: 200px;background: pink; -webkit-box-shadow:10px 10px 10px 10px red;-moz-box-shadow:10px 10px 10px 10px red;-ms-box-shadow:10px 10px 10px 10px red;-o-box-shadow:10px 10px 10px 10px red;box-shadow:10px 10px 10px 10px red;/*盒子阴影*/}</style></head><body><!--css3属性: 预览版,还没有一个正式的最终版,多以有很多的兼容性问题,浏览器不识别浏览器为了使这些属性兼容,每一个浏览器厂商都提供了一个属于自己的浏览器的语法规则,浏览器兼容前缀主流浏览器:谷歌 火狐 苹果 欧朋 ie浏览器前缀:-webkit- 谷歌浏览器-moz- 火狐浏览器-ms- ie浏览器-o- 欧朋浏览器box-shadow:水平偏移量 垂直偏移量 模糊度 模糊大小 颜色;盒子阴影--><div class="box"></div></body>
</html>```handlebars
线性渐变
```<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.box{width: 300px;height: 300px;/*background: -webkit-linear-gradient(left,red,yellow,pink);/*线性渐变background: -webkit-linear-gradient(right,red,yellow,pink);background: -webkit-linear-gradient(bottom,red,yellow,pink);background: -webkit-linear-gradient(top,red,yellow,pink);*//*background: linear-gradient(to right,blue,yellow,green);background: -webkit-linear-gradient(right top,blue,yellow,green);background: linear-gradient(to right top,blue,yellow,green);background: -webkit-linear-gradient(10deg,blue,yellow,green);}*/background: linear-gradient(to right,blue 10%,yellow ,green);background: linear-gradient(to left,blue 100px,yellow 50px ,green);</style></head><body><!--css3渐变: 由浏览器生成的线性渐变:background: -webkit-linear-gradient(方向,颜色1,颜色2,颜色3,....颜色n);background: linear-gradient(to 方向,颜色1,颜色2,颜色3,....颜色n);1 单一方向渐变: left 从左边开始right 从右边开始top 从上边开始bottom 从底部开始注意: 需要添加兼容前缀to left 到左边(结束位置)to right 到右边to top 到顶部to bottom 到底部注意: 不要添加兼容前缀2 对角渐变:left top 左上开始left bottom 左下开始right top 右上开始注意: 带兼容前缀to left top 到左上(结束位置)注意: 不带兼容前缀3 角度的渐变10deg 10度4 默认情况下颜色趋于均分可以指定颜色分布的百分比,让颜色按照百分比进行渐变blue 10% 到10% 都是蓝色red 10px 到10px都是红色--><div class="box"></div></body>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
