css函数
css函数主要有：
attr()、calc()、linear-gradient()、radial-gradient()、repeating-linear-gradient()
attr()实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> a:after {content: " (" attr(href) ")";} </style> </head> <body> <p><a href="http://www.runoob.com">菜鸟教程</a></p> <p><a href="http://www.runoob.com/html/">HTML 教程</a></p> <p><strong>注意:</strong> IE8 需要声明 !DOCTYPE 才可以支持 attr() 函数。</p> </body> </html>
calc()实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; padding: 5px; text-align: center; } </style> </head> <body> <p>创建一个横跨屏幕的div，div 两边有 50px 的间隙：</p> <div id="div1">一些文本...</div> </body> </html>
linear-gradient()实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /*默认从上到下*/ #grad1 { height: 200px; background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */ background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */ } /*从左到右*/ #grad2 { height: 200px; background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */ } /*从左上角到右下角*/ #grad3 { height: 200px; background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */ } /*指定角度，可以是负数*/ #grad4 { height: 100px; background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */ } /*多个终止色*/ #grad5 { height: 55px; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */ } /*使用了透明度*/ #grad6 { height: 200px; background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */ } </style> </head> <body> <h3>线性渐变 - 头部到底部</h3> <p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p> <div id="grad1"></div> <p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p> </body> </html>
radial-gradient()实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /*默认*/ #grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */ } /*颜色节点不均匀*/ #grad2 { background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6-15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准语法 */ } /*原型径向渐变*/ #grad3 { background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */ background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */ background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */ background: radial-gradient(circle, red, yellow, green); /* 标准语法 */ } /*不同尺寸大小关键字的使用*/ #grad4 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ } #grad5 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ } #grad6 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ } #grad7 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ } </style> </head> <body> <h3>径向渐变 - 颜色结点均匀分布</h3> <div id="grad1"></div> <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>
repeating-linear-gradient()实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /*默认*/ #grad1 { height: 200px; background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */ } /*不同的重复线性渐变*/ #grad2 { height: 200px; background: -webkit-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Safari 5.1 to 6.0 */ background: -o-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Opera 11.1 to 12.0 */ background: -moz-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Firefox 3.6 to 15 */ background: repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* 标准语法 (必须在最后) */ } #grad3 { height: 200px; background: -webkit-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Safari 5.1 to 6.0 */ background: -o-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Opera 11.1 to 12.0 */ background: -moz-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Firefox 3.6 to 15 */ background: repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* 标准语法 (必须在最后) */ } #grad4 { height: 200px; background: -webkit-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Safari 5.1 to 6.0 */ background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */ background: -moz-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Firefox 3.6 to 15 */ background: repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* 标准语法 (必须在最后) */ } </style> </head> <body> <h3>重复的线性渐变</h3> <div id="grad1"></div> <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>
