CSS3学习笔记1-选择器和新增属性 - xinyiyake(4)_H5之家

background:-webkit-linear-gradient(起始位置,颜色一位置,颜色二位置 ,颜色三位置);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 300px; height: 300px; border: 1px solid #000; margin: 10px auto; /* 线性渐变语法：background:linear-gradient(起始位置,颜色一位置,颜色二位置 ,颜色三位置); （1）需要添加私有前缀（2）第一个参数，起始位置可以接受方位名词也可以是一个点也可以是deg 角度控制的是渐变线的角度正值是逆时针，负值是顺时针（3）颜色可以是任意颜色 */ background: -webkit-linear-gradient(45deg,red 20%,green 60%,blue); } </style> </head> <body> <div class="box"></div> </body> </html> 2.径向渐变

background:-webkit-radial-gradient(起始位置,颜色一位置,颜色二位置 ,颜色三位置);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 300px; height: 300px; border: 1px solid #000; margin: 10px auto; /* 径向渐变语法：background:radial-gradient(起始位置,颜色一位置,颜色二位置 ,颜色三位置); （1）需要添加私有前缀（2）第一个参数，起始位置可以接受方位名词也可以是一个点也可以是像素不接受deg （3）颜色可以是任意颜色 */ background: -webkit-radial-gradient(150px 150px,red 20%,green 60%,blue 10%); } </style> </head> <body> <div class="box"></div> </body> </html>

总结：

私有前缀

作用：兼容低版本的一些高级浏览器，或者一些特定的css3属性需要添加私有前缀才起作用每一条css3属性合理来说都需要添加对应浏览器的前缀，以保证其兼容性

注意：在手机端，一般来说只需要写一个-webkit-（针对国内的绝大部分手机端）

添加的位置：大部分都是直接添加到最前面，css2没有的属性都是添加在最前面的，有一些是css2就有的属性是添加在后面的（例如：background：-webkit-linear-gradient（））

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } </style> </head> <body> <div></div> </body> </html>