引用:
前提:
對css中的clip的理解.
clip:
語法:
clip:auto | (top right bottom left)
取值:
auto:默認值,對象無剪切
top right bottom left:依據上-右-下-左的順序提供自對象左上角爲(0,0)座標計算的偏移值,其中任一值都可以用auto替換,即此邊不剪切.
說明:
檢索或設置對象的可視區域.可視區域外的部分是透明的.
注意:
此屬性定義了絕對(absolute)定位對象可視區域的尺寸.必須將position屬性的值設置爲absolutely,此屬性方可以使用.
例子:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>無標題頁</title> <style type="text/css"> div { width:100px; height:100px; border:solid 1px black; position:absolute; display:inline; background-color:Silver; } .dv1 { left:120px; clip:rect(10px auto auto auto); } .dv2 { left:240px; clip:rect(auto 10px auto auto); } .dv3 { top:130px; clip:rect(auto auto 10px auto); } .dv4 { top:130px; left:120px; clip:rect(auto auto auto 10px); } </style> </head> <body> <div> 正常 </div> <div class="dv1"> 上 </div> <div class="dv2"> 右 </div> <div class="dv3"> 下 </div> <div class="dv4"> 左 </div> </body> </html>
效果:
對於本文的實現,具體如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>無標題頁</title> <style type="text/css"> .st { width:217px; clip:rect(auto auto auto 198px); position:absolute; } </style> </head> <body> <input type="text" id="txt" style="width:200px; position:absolute; padding-left:5px" /> <select class="st" id="st" οnchange="st_change()"> <option value="北京"> 北京 </option> <option value="天津"> 天津 </option> </select> <script type="text/javascript"> function st_change(){ txt.value = st.value; } window.οnlοad=st_change; </script> </body> </html>
效果:
上海是由輸入框輸入進去的
