{"id":818,"date":"2010-05-23T20:24:37","date_gmt":"2010-05-23T12:24:37","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=818"},"modified":"2018-01-01T17:05:35","modified_gmt":"2018-01-01T09:05:35","slug":"csssandpaper-%e5%85%bc%e5%ae%b9ie%e7%9a%84css3-javascript%e5%ba%93","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2010\/05\/csssandpaper-%e5%85%bc%e5%ae%b9ie%e7%9a%84css3-javascript%e5%ba%93\/","title":{"rendered":"cssSandpaper-\u517c\u5bb9IE\u7684CSS3 JavaScript\u5e93"},"content":{"rendered":"

by zhangxinxu<\/a> from http:\/\/www.zhangxinxu.com<\/a>
\n\u672c\u6587\u5730\u5740\uff1ahttp:\/\/www.zhangxinxu.com\/wordpress\/?p=818<\/a><\/p>\n

\u4e00\u3001\u5f15\u8a00 – \u611f\u6168<\/h3>\n

\u968f\u7740\u65f6\u95f4\u4e00\u5929\u5929\u7684\u8fc7\u53bb\uff0c\u5404\u4e2a\u6d4f\u89c8\u5668\u5bf9CSS3\u7684\u652f\u6301\u4e5f\u8d8a\u6765\u8d8a\u6210\u719f\uff0cCSS3\u7684\u65f6\u4ee3\u7684\u5230\u6765\u5df2\u7ecf\u6210\u4e3a\u4e86\u5fc5\u7136\uff0c\u4e00\u5207\u53ea\u662f\u65f6\u95f4\u95ee\u9898\uff0c\u4e00\u5207\u8981\u770bIE\u6d4f\u89c8\u5668\u3002\u56fd\u5185\u5bf9\u4e8eCSS3\u7684\u5b66\u4e60\u4e0e\u8c08\u8bba\u7b49\u4f3c\u4e4e\u8fc7\u4e8e\u5e73\u9759\u7684\uff0c\u9759\u7684\u5c31\u50cf\u4e00\u6f6d\u6b7b\u6c34\u4e00\u6837\u3002\u8003\u8651\u5230IE\u6d4f\u89c8\u5668\u4e3a\u738b\u7684\u73b0\u72b6\uff0c\u8fd9\u4e00\u5207\u4e5f\u5f88\u597d\u7406\u89e3\u3002\u6bcf\u5f53\u770b\u5230\u56fd\u5916\u5bf9\u4e8eCSS3\u4e0eHTML5\u4e89\u8bba\u7814\u7a76\u5982\u706b\u5982\u837c\u7684\u65f6\u5019\uff0c\u6211\u5fc3\u4e2d\u603b\u662f\u6709\u4e00\u4e1d\u54c0\u53f9\uff0c\u53f9\u606f\u6211\u4eec\u53c8\u4e00\u6b21\u7684\u843d\u540e\u4e8e\u4ed6\u4eba\u3002\u8ba9\u6211\u60f3\u5230\u751f\u7269\u4ea7\u4e1a\uff08\u6211\u7684\u5927\u5b66\u4e13\u4e1a\uff09\uff0c\u56fd\u5bb6\u662f\u60f3\u901a\u8fc7\u751f\u7269\u632f\u5174\u56fd\u5bb6\u524d\u6cbf\u79d1\u6280\uff0c\u5728\u56fd\u9645\u751f\u7269\u9886\u57df\u6709\u4e00\u5e2d\u4e4b\u5730\u7684\uff0c\u4f46\u662f\u51e0\u5341\u5e74\u8fc7\u53bb\u4e86\uff0c\u7f8e\u56fd\u5df2\u7ecf\u6210\u529f\u5408\u6210\u4eba\u9020\u751f\u547d\uff0c\u6211\u4eec\u5462\uff1f\u6211\u60f3\u5230\u4e86\u6211\u51fa\u56fd\u7684\u6216\u662f\u4fdd\u7814\u7684\u540c\u5b66\u4eec\uff0c\u5728\u4e2d\u56fd\u73b0\u5728\u8fd9\u4e2a\u5927\u73af\u5883\u4e0b\uff0c\u8981\u60f3\u53d6\u5f97\u4e3e\u4e16\u77a9\u76ee\u7684\u751f\u7269\u5b66\u6210\u5c31\u5b9e\u5728\u662f\u4efb\u91cd\u9053\u8fdc\u3002\u6211\u73b0\u5728\u5c31\u6709\u4e00\u4e1d\u65e0\u5948\uff0c\u60f3\u5c3d\u81ea\u5df1\u7684\u529b\u4e3a\u56fd\u5185\u7684\u524d\u7aef\u53d1\u5c55\u505a\u4e00\u70b9\u8d21\u732e\uff0c\u4f46\u662f\uff0c\u6bcf\u6bcf\u770b\u5230\u5f53\u524d\u73b0\u72b6\uff0c\u4e00\u4e1d\u676f\u6c34\u8f66\u85aa\uff0c\u6d77\u4e2d\u867e\u7c73\u4e4b\u611f\u6cb9\u7136\u800c\u751f\u3002\u7136\u800c\uff0c\u6211\u8fd8\u4f1a\u7ee7\u7eed\uff0c\u5c82\u56e0\u97f3\u5c0f\u4e0d\u5450\u558a\uff0c\u58f0\u5f31\u4e0d\u75be\u547c\u3002<\/p>\n

\u6211\u524d\u4e0d\u4e45\u4ecb\u7ecd\u4e86\u4e00\u4e2a\u8ba9IE6\/IE7\/IE8\u652f\u6301\u5e38\u89c1CSS3\u5c5e\u6027\u7684\u65b9\u6cd5\u7684\u6587\u7ae0\u201c\u8ba9IE6\/IE7\/IE8\u6d4f\u89c8\u5668\u652f\u6301CSS3\u5c5e\u6027<\/a>\u201d\uff0c\u90a3\u91cc\u662f\u4f7f\u7528\u7684htc\u6587\u4ef6+VML\u8bed\u8a00\u5b9e\u73b0\u7684\uff0c\u8f7b\u91cf\u5b9e\u7528\u3002\u800c\u672c\u6587\u5373\u5c06\u4ecb\u7ecd\u7684CSS3 JavaScript\u5e93cssSandpaper<\/code>\u91c7\u7528\u7684\u5219\u662f\u4e0d\u540c\u7684\u539f\u7406\u4f7fIE\u6d4f\u89c8\u5668\u652f\u6301CSS3\u5c5e\u6027\uff0c\u8bf4\u7a7f\u4e86\u5f88\u7b80\u5355\uff0c\u5c31\u662fIE\u6ee4\u955c\u3002\u4e0b\u9762\u5c31\u5f00\u59cb\u8be6\u7ec6\u4ecb\u7ecd\uff1a<\/p>\n

\u4e8c\u3001cssSandpaper\u6982\u8ff0<\/h3>\n

cssSandpaper\u7684\u4e3b\u8981\u4f5c\u8005\u662f\uff1a<\/a> @zoltandulac<\/a>\uff0c\u539f\u6587\u4ecb\u7ecd\u5730\u5740\u4e3a\uff1ahttp:\/\/www.useragentman.com\/…ipt-library\/<\/a><\/p>\n

cssSandpaper\u662f\u4e00\u4e2aCSS3\u7684JavaScript\u5e93\uff0c\u4f7f\u7528\u7279\u5b9a\u7684CSS\u4e66\u5199\u89c4\u5219\u53ef\u4ee5\u8ba9\u9875\u9762\u5143\u7d20\u652f\u6301CSS3\u7684\u4e00\u4e9b\u7279\u6027\uff0c\u4f8b\u5982\uff0c\u65cb\u8f6c\uff0c\u62c9\u4f38\uff0c\u76d2\u9634\u5f71\uff0c\u6e10\u53d8\u7b49\u6548\u679c\uff0c\u5305\u62ecIE\u6d4f\u89c8\u5668\u3002\u7531\u4e8ecssSandpaper\u5b9e\u73b0IE\u4e0b\u7684CSS3\u6548\u679c\u5168\u90e8\u90fd\u662f\u4f7f\u7528\u7684filter\u6ee4\u955c\u5b9e\u73b0\u7684\uff0c\u6240\u4ee5\u5176\u4e2d\u5c31\u6709\u4e0d\u5c11\u5c40\u9650\u6027\uff0c\u4f8b\u5982IE\u4e2d\u6ca1\u6709\u652f\u6301\u5706\u89d2\u7684\u6ee4\u955c\uff0c\u6240\u6709cssSandpaper\u65e0\u6cd5\u5b9e\u73b0\u5706\u89d2\u6548\u679c\uff0c\u540c\u6837\u7684\u539f\u56e0\uff0cIE\u6d4f\u89c8\u5668\u4e0bbox-shadow\u6ca1\u6709\u6a21\u7cca\u8fc7\u6e21\uff0c\u4e0d\u652f\u6301\u5f84\u5411\u6e10\u53d8\u7b49\u3002\u7136\u800c\uff0c\u8fd8\u662f\u53ef\u4ee5\u5b9e\u73b0\u4e0d\u5c11\u70ab\u9177\u7684\u6548\u679c\u7684\u3002<\/p>\n

\u4e00\u65e6\u8c03\u7528\u4e86cssSandpaper CSS3 JavaScript\u5e93\u6587\u4ef6\u540e\uff0c\u5b9e\u73b0CSS3\u6548\u679c\u7684\u8c03\u7528\u4e5f\u6bd4\u8f83\u7279\u522b\uff0c\u9700\u8981\u4f7f\u7528\u7279\u5b9a\u7684\u524d\u7f00\u6837\u5f0f\u5199\u6cd5\uff0c\u800c\u4e14\u5f88\u91cd\u8981\u7684\u662fcssSandpaper\u652f\u6301JavaScript\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0c\u53ef\u4ee5\u901a\u8fc7js\u8bbe\u7f6e\uff0c\u52a8\u6001\u6539\u53d8\u5404\u4e2a\u6d4f\u89c8\u5668\uff08\u5305\u62ecIE\uff09CSS3\u8868\u73b0\uff0c\u8fd9\u5f80\u5f80\u53ef\u4ee5\u7528\u6765\u5b9e\u73b0\u4e00\u4e9b\u7cbe\u6e5b\u7684UI\u8868\u73b0\u3002\u8fdb\u5165\u4e0b\u4e00\u8282\u3002<\/p>\n

\u4e09\u3001cssSandpaper\u4e0b\u7cbe\u6e5bUI\u6548\u679c\u5c55\u793a<\/h3>\n
1. cssSandpaper\u4e0b\u517c\u5bb9\u6027\u4e09\u7ef4\u7acb\u65b9\u4f53\u6548\u679c<\/strong><\/div>\n

\u6240\u8c13\u4e00\u56fe\u751a\u5343\u8a00\uff0c\u770b\u4e0b\u9762\u7684\u6548\u679c\u622a\u56fe\uff0c\u622a\u81eaIE6\u6d4f\u89c8\u5668\uff1a<\/p>\n

\"IE6\u4e0b\u7684\u4e09\u7ef4\u7acb\u65b9\u4f53\u6548\u679c<\/div>\n

\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1acssSandpaper\u4e0b\u4e09\u7ef4\u7acb\u65b9\u4f53\u6548\u679cdemo<\/a><\/p>\n

\u6b64\u6548\u679c\u4e3b\u8981\u662f\u4f7f\u7528\u7684CSS3\u4e2d\u7684transform\u5c5e\u6027\u5b9e\u73b0\u7684\uff0c\u8fd9\u4e2a\u4e0b\u9762\u4f1a\u8be6\u7ec6\u4ecb\u7ecd\u3002<\/p>\n

2. cssSandpaper\u4e0b\u65f6\u949f\u6548\u679c<\/strong><\/div>\n

\u6548\u679c\u5982\u4e0b\u622a\u56fe\uff0c\u622a\u81eaIE6\u6d4f\u89c8\u5668\uff0c\u56fe\u4e2d\u7684\u79d2\u949f\u662f\u4f1a\u8d70\u52a8\u7684\u54e6~~<\/p>\n

\"IE6\u4e0bCSS3\u5b9e\u73b0\u949f\u8868\u6548\u679c<\/div>\n

\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1acssSandpaper\u4e0b\u65f6\u949f\u6548\u679cdemo<\/a><\/p>\n

\u6b64\u6548\u679c\u4e3b\u8981\u662f\u5e94\u7528\u7684\u4e86CSS3 animate\u52a8\u753b\u6548\u679c\u5b9e\u73b0\u7684\u3002<\/p>\n

\u4e09\u3001\u5982\u4f55\u4f7f\u7528cssSandpaper\u5e93<\/h3>\n
1. \u4e0b\u8f7djs\u6587\u4ef6<\/strong><\/div>\n
\u539f\u59cb\u5b8c\u6574\u6e90\u6587\u4ef6(en)\uff1acssSandpaper.1.1a-beta1.zip<\/a>
\u7eaf\u7cb9js\u6587\u4ef6\u6253\u5305(\u5df2\u5904\u7406)\uff1acssSandpaper.zxx.js.zip<\/a>(22.8K)<\/span><\/div>\n

\u6ce8\u610f\uff1a\u539f\u7f51\u7ad9\u6e90\u6587\u4ef6\u7684js\u6709\u4e2a\u5c0f\u5c0f\u95ee\u9898\uff0c\u5c31\u662f\u989d\u5916\u8c03\u7528\u4e86\u4e00\u4e2a\u5dee\u4e0d\u591a10K\u7684EventHelpers.js\uff0c\u800c\u8fd9\u4e2ajs\u662f\u7528\u6765\u5bf9\u6d4f\u89c8\u5668\u4e8b\u4ef6\u505a\u4f18\u5316\u7edf\u4e00\u5904\u7406\u7684\uff0c\u5b9e\u9645\u4e0a\u662f\u53ef\u4ee5\u7701\u7565\u7684\u3002\u4e8e\u662f\u6211\u5bf9cssSandpaper.js\u505a\u4e86\u70b9\u7b80\u5355\u7684\u4fee\u6539\uff0c\u4f7f\u5176\u8131\u79bbEventHelpers.js\u4e5f\u80fd\u6b63\u5e38\u4f7f\u7528\uff0c\u4e8e\u662f\uff0c\u53ea\u8981\u8c03\u7528\u4e09\u4e2ajs\u6587\u4ef6\u5c31\u53ef\u4ee5\u4e86\uff0c\u800c\u539f\u6765\u7684\u9700\u8981\u8c03\u75284\u4e2ajs\u6587\u4ef6\u3002\u6240\u4ee5\uff0c\u6211\u662f\u5efa\u8bae\u60a8\u4e0b\u8f7d\u5904\u7406\u540e\u7684\u201c\u7eaf\u7cb9\u7684js\u6253\u5305<\/a>\u201d\u3002<\/p>\n

2. \u8c03\u7528JavaScript\u6587\u4ef6<\/strong>
\u8c03\u7528\u7684\u4ee3\u7801\u5982\u4e0b\u6240\u793a\uff1a<\/div>\n
\n
<script src=\"\/study\/js\/cssQuery-p.js\"><\/script>\n<script src=\"\/study\/js\/jcoglan.com\/sylvester.js\"><\/script>\n<script src=\"\/study\/js\/css3Helpers.js\"><\/script><\/pre>\n<\/div>\n
3. \u4f7f\u7528<\/strong>
\u5bf9CSS3\u6709\u6240\u4e86\u89e3\u7684\u540c\u884c\u5e94\u8be5\u77e5\u9053\uff0c\u8bb8\u591a\u5c5e\u6027\u7684\u5e94\u7528\u9700\u8981\u6709\u7279\u5b9a\u7684\u79c1\u6709\u524d\u7f00\uff0c\u4f8b\u5982Firefox\u4e0b\u7684-moz-box-shadow\uff0c\u6216\u662f-moz-border-radius\u7b49\uff0c\u8fd9\u91cc\uff0c\u60a8\u4e00\u65e6\u5e94\u7528\u4e86cssSandpaper\u5e93\uff0c\u5219CSS\u6587\u4ef6\u4e2d\u65e0\u9700\u9488\u5bf9\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u4e66\u5199\u4e0d\u540c\u7684\u524d\u7f00\u4e86\uff0c\u56e0\u4e3a\u5e93\u6587\u4ef6\u5df2\u7ecf\u5e2e\u4f60\u89e3\u51b3\u4e86\u3002\u60a8\u6240\u9700\u8981\u4f7f\u7528\u7684\u662f\u9488\u5bf9cssSandpaper\u5e93\u7684\u7279\u6b8a\u7684\u524d\u7f00\uff0c\u90a3\u5c31\u662f-sand-<\/strong><\/em>\uff0c\u56e0\u6b64\uff0c\u60a8\u53ef\u4ee5\u5728CSS\u4e2d\u8bbe\u7f6e\u8bf8\u5982\u4e0b\u9762\u7684\u4e00\u4e9b\u5c5e\u6027\uff1a<\/p>\n
\n-sand-transform: rotate(-30deg) skew(-30deg, 0deg);\nbackground-image: -sand-gradient(linear, center top, center bottom, from(#EBE5DE), to(#ea9b3d) );\n-sand-box-shadow: 15px 15px #ffcccc;\n<\/pre>\n
cssSandpaper\u5e93\u8fd8\u6709\u7684\u4e00\u70b9\u5f3a\u5927\u4e4b\u5904\u5728\u4e8e\u5176\u53ef\u4ee5\u4f7f\u7528js\u8fdb\u884c\u517c\u5bb9\u6027\u7684\u8bbe\u7f6e\uff0c\u62fftransform<\/code>\u5c5e\u6027\u4e3e\u4f8b\uff0c\u6309\u7167\u6211\u4eec\u73b0\u5728\u5bf9DOM\u5143\u7d20CSS\u5c5e\u6027\u8bbe\u7f6e\u7684\u7406\u89e3\uff0c\u8bbe\u7f6e\u4e00\u4e2a\u5143\u7d20\u7684transform<\/code>\u5c5e\u6027\u4ee3\u7801\u5e94\u8be5\u7c7b\u4f3c\u4e0b\u9762\u7684\uff1a<\/p>\n
\n
node.style.transform = \"rotate(25deg)\";<\/pre>\n<\/div>\n
\u8fd9\u5728\u5199\u6cd5\u4e0a\u662f\u6ca1\u9519\u7684\uff0c\u4f46\u662f\u8003\u8651\u5230\u76ee\u524dIE\u6d4f\u89c8\u5668\u5bf9\u5176\u4e0d\u652f\u6301\uff0c\u6240\u4ee5\u5176\u901a\u7528\u6027\u6709\u9650\u3002\u5728cssSandpaper\u5e93\u73af\u5883\u4e0b\uff0c\u6709\u4e86\u517c\u5bb9\u6027\u7684\u66ff\u4ee3\u65b9\u6cd5\uff0c\u53c2\u89c1\u5982\u4e0b\u7684\u4ee3\u7801\uff1a<\/p>\n
\n
cssSandpaper.setTransform(node, \"rotate(25deg) scale(2, 2) skew(20deg, 20deg)\");\ncssSandpaper.setOpacity(node, 0.3);\ncssSandpaper.setBoxShadow(node, \"10px 10px 5px #ffcccc\");\ncssSandpaper.setGradient(node, \"-sand-gradient(linear, center top, center bottom, from(#0000ff), to(#ff0000));\")<\/pre>\n<\/div>\n
\u5173\u4e8e\u6b64\u66f4\u4e3a\u5b9e\u9645\u7684\u5e94\u7528\uff0c\u60a8\u53ef\u4ee5\u53c2\u89c1\u4e0b\u9762\u7684\u5b9e\u4f8b\u5c5e\u6027\u5c55\u793a\u3002<\/p>\n
\u672c\u6587\u4f5c\u8005\uff1a\u5f20\u946b\u65ed\uff0c\u6765\u81ea\u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b(http:\/\/www.zhangxinxu.com\/wordpress\/)<\/div>\n
\u672c\u6587\u5730\u5740\uff1ahttp:\/\/www.zhangxinxu.com\/wordpress\/?p=818<\/a> \u8bbf\u95ee\u539f\u51fa\u5904\uff0c\u66f4\u591a\u4f60\u672a\u89c1\u8fc7\u7684\u524d\u7aef\u6280\u672f\u3002<\/div>\n
\u56db\u3001\u5c5e\u6027\u4e4b-sand-transform<\/h3>\n
\u529f\u80fd\u4f5c\u7528\u5c31\u662f\u5141\u8bb8\u5bf9HTML\u5143\u7d20\u8fdb\u884c\u65cb\u8f6c\uff0c\u4f38\u7f29\u4ee5\u53ca\u659c\u5207\u3002\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n
\n
#container {\n    -sand-transform:  <function-list><\/em>;\n}<\/pre>\n<\/div>\n
\u6b64\u5904\u7684<function-list><\/em>\u8868\u793a\u65b9\u6cd5\u5217\u8868\uff0c\u652f\u6301\u7684\u65b9\u6cd5\u89c1\u4e0b\u8868\uff1a<\/p>\n\n\n\n\n\n\n\n\n\n
\u65b9\u6cd5<\/th>\n\u4f5c\u7528<\/th>\n<\/tr>\n<\/thead>\n
rotate(angle)<\/code><\/td>\n\u65cb\u8f6cHTML\u5143\u7d20\u3002angle<\/code>\u53ef\u4ee5\u662f\u89d2\u5ea6(\u4f8b\u5982\uff1arotate(30deg)<\/code>)\uff0c\u6216\u8005\u662f\u5f27\u5ea6\uff0c\u5982rotate(1.3rad)<\/code><\/td>\n<\/tr>\n
scale(sx[, sy])<\/code><\/td>\n\u7f29\u653eHTML\u5143\u7d20\u3002sx<\/code>\u548csy<\/code>\u90fd\u662f\u6570\u503c\uff0c\u5982\u679c\u662f1<\/code>\uff0c\u5219\u8868\u793a\u4fdd\u6301\u539f\u5927\u5c0f\uff0c\u5982\u679c\u662f2<\/code>\uff0c\u5219\u4e3a\u539f\u67652\u500d\u5927\u5c0f\uff0c\u4f9d\u6b21\u7c7b\u63a8\u3002\u5982\u679csy<\/code> \u672a\u6307\u5b9a\uff0c\u5219\u5176\u4f59sx<\/code>\u662f\u4e00\u6837\u7684\u5927\u5c0f\u3002\u7c7b\u4f3c\u7684\u65b9\u6cd5\u4e3ascaleX(sx)<\/code>\u548cscaleY(sy)<\/code>.<\/td>\n<\/tr>\n
translate(tx, ty)<\/code><\/td>\n\u4ece\u5bf9\u8c61\u7684\u5f53\u524d\u4f4d\u7f6e\u8fdb\u884c\u504f\u79fb(\u6c34\u5e73\u548c\u5782\u76f4\u79fb\u52a8)HTML\u5143\u7d20\u3002(\u4e0eCSS\u7684top<\/code>\u548cleft<\/code>\u76f8\u53cd\uff0c\u5176\u4ece\u6d4f\u89c8\u5668\u7684\u89c6\u89d2\u79fb\u52a8\u7269\u4f53\u3002tx<\/code>\u548cty<\/code>\u8868\u793a\u6c34\u5e73\u7684\u548c\u5782\u76f4\u7684\u504f\u79fb\u4f4d\u7f6e\u3002Internet Explorer\u6d4f\u89c8\u5668\u8981\u5728\u7248\u672c 1.1 beta 1\u4e2d\u624d\u5f15\u5165\u4e86\u6b64\u65b9\u6cd5\u3002<\/strong><\/td>\n<\/tr>\n
skew(ax[, ay])<\/code><\/td>\n\u901a\u8fc7\u6307\u5b9a\u89d2\u5ea6\u6216\u662f\u5f27\u5ea6\u503e\u659c\u5143\u7d20\u7684x\u8f74\u548cy\u8f74\u3002\u5982\u679cay<\/code> \u4e3a\u63d0\u4f9b\uff0c\u5219\u5176\u88ab\u5f53\u505a0deg<\/code>\u5904\u7406\u3002<\/td>\n<\/tr>\n
matrix(a, c, b, d, tx, ty)<\/code><\/td>\n\u901a\u8fc7\u6307\u5b9a6\u4e2a\u503c\u5e94\u75282D \u8f6c\u6362\u77e9\u9635\u3002\u5982\u679c\u60a8\u4e0d\u4e86\u89e3\u7ebf\u6027\u4ee3\u6570\u6216\u662f\u77e9\u9635\u7b97\u6cd5\uff0c\u90a3\u4e48\u8981\u7406\u89e3\u6b64\u65b9\u6cd5\u8fd8\u662f\u6709\u4e9b\u56f0\u96be\u7684\u3002\u66f4\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u60a8\u53ef\u4ee5\u53c2\u9605\u8fd9\u91cc\u7ef4\u57fa\u767e\u79d1\u503c\u8f6c\u6362\u4e3e\u8bc1<\/a>\u8fd9\u7bc7\u6587\u7ae0\u3002
\u5982\u679c\u60a8\u719f\u6089\u77e9\u9635\u4e58\u6cd5\uff0c\u60a8\u53ef\u4ee5\u6ce8\u610f\u5230c\u548cb\u662f\u76f8\u53cd\u7684\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u4e00\u4e9b\u5e94\u7528\u5b9e\u4f8b<\/strong>
1. \u65cb\u8f6c<\/strong>
\u4f8b\u5982\u4e0b\u9762\u7684\u4e00\u4e2a\u548c\u7b80\u5355\u7684\u65cb\u8f6c45\u5ea6\u7684\u6548\u679c\u56fe\uff1a<\/p>\n
\"\u65cb\u8f6c45\u5ea6\u6548\u679c\u56fe<\/div>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a\u65cb\u8f6c\u5b9e\u4f8bdemo<\/a><\/p>\n
\u4e0a\u8ff0\u6548\u679c\u7684\u6838\u5fc3\u7684CSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
\n
-sand-transform:rotate(45deg);<\/pre>\n<\/div>\n<\/div>\n
\u8fd9\u91ccIE\u4e0b\u65cb\u8f6c\u6548\u679c\u7684\u5b9e\u73b0\u662f\u4f7f\u7528\u7684IE\u6ee4\u955c\uff0c\u5173\u4e8e\u5143\u7d20\u7684\u65cb\u8f6c\uff0c\u6211\u5728\u4e4b\u524d\u6709\u8fc7\u975e\u5e38\u8be6\u7ec6\u7684\u4ecb\u7ecd\uff0c\u60a8\u6709\u5174\u8da3\u53ef\u4ee5\u53c2\u89c1\u6211\u7684\u201c\u56fe\u7247\u65cb\u8f6c\u6548\u679c\u7684\u4e00\u4e9b\u7814\u7a76\u3001jQuery\u63d2\u4ef6\u53ca\u5b9e\u4f8b<\/a>\u201d\u8fd9\u7bc7\u6587\u7ae0\u3002\u76f8\u4fe1\u4f1a\u8ba9\u60a8\u5bf9\u5143\u7d20\u65cb\u8f6c\u6709\u8fdb\u4e00\u6b65\u7684\u8ba4\u8bc6\u7684\u3002<\/p>\n
2. \u659c\u5207<\/strong>
\u4e0d\u7ba1\u600e\u6837\uff0c\u5148\u770b\u6548\u679c\u56fe\uff1a<\/p>\n
\"\u659c\u5207\u6548\u679c\u56fe<\/div>\n
\u4e0a\u9762\u6548\u679c\u7684\u6838\u5fc3CSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
\n
-sand-transform: skew(45deg, 0deg);<\/pre>\n<\/div>\n<\/div>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a\u659c\u5207\u6548\u679c\u5b9e\u4f8bdemo<\/a><\/p>\n
\u4e94\u3001\u5c5e\u6027\u4e4b-sand-box-shadow<\/h3>\n
\u5b9e\u73b0\u5757\u72b6\u5143\u7d20\u7684\u6295\u5f71\u6548\u679c\uff0c\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n
#container {\n   -sand-box-shadow: <horizontal-offset><\/em> <vertical-offset><\/em> <blur-radius><\/em>;\n}<\/pre>\n
\u5b9e\u4f8b<\/strong><\/p>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a\u76d2\u9634\u5f71\u6548\u679c\u5b9e\u4f8bdemo<\/a><\/div>\n
\u5173\u4e8eCSS3 \u76d2\u9634\u5f71\u7684\u4ecb\u7ecd\uff0c\u60a8\u53ef\u4ee5\u53c2\u89c1\u8fd9\u91cc<\/a>\u3002<\/p>\n
\u5728\u672c\u5b9e\u4f8b\u4e2d\uff0c\u7531\u4e8eIE\u6ee4\u955c\u4e0d\u652f\u6301\u6295\u5f71\u7684\u6a21\u7cca\uff0c\u6240\u4ee5\u65e0\u6cd5\u5b9e\u73b0\u903c\u771f\u7684\u6295\u5f71\u6548\u679c\u3002\u800c\u5728\u672c\u6587\u5f00\u5934\u63d0\u5230\u7684\u4f7f\u7528VML\u8bed\u8a00\u5b9e\u73b0\u7684CSS3\u6548\u679c\u4e2d\uff0c\u662f\u53ef\u4ee5\u8ba9IE\u6d4f\u89c8\u5668\u6709\u5e73\u6ed1\u8fc7\u6e21\u98de\u6295\u5f71\u6548\u679c\u7684\u3002<\/p>\n
\u516d\u3001\u5c5e\u6027\u4e4b-sand-gradient<\/h3>\n
\u5b9e\u73b0\u5143\u7d20\u7684\u6e10\u53d8\u6548\u679c\uff0c\u5305\u62ec\u7ebf\u6027\u6e10\u53d8\u548c\u5f84\u5411\u6e10\u53d8\uff08IE\u4e0d\u652f\u6301\uff09\u3002\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n
\n
#container {\n   background-image: -sand-gradient(<type>, <start-point>, <end-point>, <color-stop1>, <color-stop2>, ..., <color-stopN><\/em>)\n}<\/pre>\n<\/div>\n
\u5173\u4e8e\u8bed\u6cd5\u7684\u4e00\u4e9b\u53c2\u6570\uff0c\u5173\u4e8eCSS\u6e10\u53d8\u80cc\u666f\uff0c\u60a8\u53ef\u4ee5\u53c2\u89c1\u6211\u4e4b\u524d\u5199\u76843\u7bc7\u6587\u7ae0\uff08CSS\u6e10\u53d8\u4e4bCSS3 gradient\u5728Firefox3.6\u4e0b\u7684\u4f7f\u7528 <\/a>\u3001CSS gradient\u6e10\u53d8\u4e4bwebkit\u6838\u5fc3\u6d4f\u89c8\u5668\u4e0b\u7684\u4f7f\u7528 <\/a>\u3001CSS\u5b9e\u73b0\u517c\u5bb9\u6027\u7684\u6e10\u53d8\u80cc\u666f(gradient)\u6548\u679c <\/a>\uff09\uff0c\u91cc\u9762\u9488\u5bf9\u4e0d\u540c\u6d4f\u89c8\u5668\u7684\u6e10\u53d8\u90fd\u505a\u4e86\u975e\u5e38\u8be6\u7ec6\u7684\u4ecb\u7ecd\u3002<\/p>\n
\u4e0b\u56fe\u4e3a\u672c\u5b9e\u4f8b\u4e2d\u7684\u6548\u679c\u622a\u56fe\uff1a<\/p>\n
\"\u6e10\u53d8\u6548\u679c\u622a\u56fe<\/div>\n
\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a\u6e10\u53d8\u6548\u679c\u5b9e\u4f8bdemo<\/a><\/p>\n
IE\u6d4f\u89c8\u5668\u4e0b\u662f\u65e0\u6cd5\u5b9e\u73b0\u5f84\u5411\u6e10\u53d8\u7684\u3002<\/div>\n
\u516d\u3001\u5c5e\u6027\u4e4bopacity<\/h3>\n
opacity<\/code>\u5c5e\u6027\u6700\u7b80\u5355\u4e86\uff0c\u540e\u9762\u76f4\u63a5\u8ddf\u4e00\u4e2a0~1\u7684\u6570\u503c\u5c31\u53ef\u4ee5\u4e86\uff0c\u4e0d\u9700\u8981\u4efb\u4f55\u7684\u524d\u7f00\u3002<\/p>\n
#container {\n   opacity:  <opacity-level;<\/em>;\n}<\/pre>\n
\u7531\u4e8e\u8f83\u4e3a\u7b80\u5355\uff0c\u5c31\u4e0d\u4e0a\u56fe\uff0c\u4e0d\u4e0ademo\u4e86\u3002<\/p>\n
\u4e03\u3001cssSandpaper\u5df2\u77e5\u7684\u4e00\u4e9b\u95ee\u9898<\/h3>\n