1.特定厂商的属性和前缀
在新的css3功能称为正式的css3规范之前,或者在一个规范的功能实现还没有最后确定之前,css3厂商前缀是一种支持
浏览器 系统前缀
Android -webkit-
Chrome -webkit-
Firefox -moz-
Internet Explore -ms
iOS -webkit-
Opera -o-
Safari -webkit-
2.css边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3边框</title> <style type="text/css"> #div1{ background-color: #8080ff; width: 400px; height: 250px; box-shadow: 10px 10px 10px #808080; -webkit-box-shadow:10px 10px 10px #808080; } </style> </head> <body> <!-- 阴影参数 动作 h-shadow(必须) 水平阴影的位置 v-shadow(必须) 垂直阴影的位置 blur(可选) 模糊距离 spread(可选) 阴影的大小 color(可选) 阴影的颜色,默认黑色 --> <div id="div1"></div> </body> </html>
3..border-radius属性实现圆角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-radius属性实现圆角</title> <style type="text/css"> #div1{ -webkit-border-radius:25px; background-color: #8080ff; width: 400px; height: 250px; border-radius: 25px; } </style> </head> <body> <div id="div1"></div> </body> </html>
可以使用单独的border-left-radius,border-top-radius,border-buttom-radius,border-right-radius属性来分别制定圆角
4.background-size属性设置图像大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-size属性</title> <style type="text/css"> #div1{ background-size: 400px; background-image: url(D:/照片大全/我女神/俏皮元气.jpg); width: 400px; height: 250px; border-radius: 25px; } </style> </head> <body> <div id="div1"></div> </body> </html>
background-size:可以用长度 百分比 contain cover来设置背景图像的大小
日天....这本书特别简略,我已经发现自己在过渡学习