用线性渐变实现方格
CSS3如果合理运用可以少插入很多的图片,不过它的兼容问题也要注意。随着IE6~8的没落,相信CSS3将会越来越来多的被使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线性渐变 - 特殊案例</title> <style type="text/css"> div { width: 800px; height: 500px; background: #abcdef; background-size: 50px 50px; background-image: -webkit-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -webkit-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -webkit-linear-gradient(45deg, transparent 75%, #555 75%), -webkit-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%); } </style> </head> <body> <div></div> </body> </html>
效果如上
/**THE END*/
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。