DIV+CSS如何实现边框阴影?
- 提问者网友:niaiwoma
- 2021-04-27 18:12
- 五星知识达人网友:行路难
- 2021-04-27 19:37
一般是右侧和下侧的边框线造成的效果,或者就是背景图片。
- 1楼网友:一叶十三刺
- 2021-04-27 21:56
<html xmlns:rdl> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Rainer's Handbook</title> <style> body{margin:0px;padding:16px;background:#FFFFFF;overflow:auto;} body,table,input,select,textarea,a{font-family:verdana,tahoma,arial;font-size:11px;color:#000000;word-break:break-all;} table,img{border:0px;} a{text-decoration:none;color:#003399;} a:hover{color:#000000;text-decoration:underline;} #id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;} #id_span3{font-size:10px;font-family:tahoma;} </style> <style> #idParentDiv{width:100%;height:120px;padding:6px;background-color:buttonshadow;position:relative;} #idDiv{width:80%;height:80px;background-color:#FFD700;padding:6px;position:absolute;z-index:3;left:9px;top:9px;filter:progid:DXImageTransform.Microsoft.Glow(color=#000000,Strength=7);} #idSpan{position:relative;height:60px;filter:progid:DXImageTransform.Microsoft.Glow();} #idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;} </style>
<script> var sFilter="filter : progid:DXImageTransform.Glow("; function rdl_change(e){ var oCodeDiv=document.all("idCodeDiv"); var oDiv=document.all("idDiv"); var oSpan=document.all("idSpan"); with (document.all("idSel1")) var sValue1=options[selectedIndex].value; with (document.all("idSel2")) var sValue2=parseInt(options[selectedIndex].value); with (oDiv.filters[0]) { Color=sValue1;Strength=sValue2; } with (oSpan.filters[0]) { Color=sValue1;Strength=sValue2; } oCodeDiv.innerText=sFilter+"color="+sValue1+",strength="+sValue2+");"; } </script>
</head> <body> <div id=idParentDiv> <div id=idDiv><img src="images/rdl_body0.jpg" ><span id=idSpan>请从下方选择滤镜参数的值。</span></div> </div> <br> <table><tr><td> <select id="idSel1" onchange="rdl_change();"> <option value="#FF0000">---Color--- <option value="#FF0000">#FF0000 <option value="#003399">#003399 <option value="#000000" selected>#000000 </select> </td><td> <select id="idSel2" onchange="rdl_change();"> <option value="5">---Strength--- <option value="5">5 <option value="8" selected>8 <option value="0">0 <option value="3">3 <option value="12">12 <option value="24">24 </select> </td></tr></table> <div id=idCodeDiv>filter : progid:DXImageTransform.Microsoft.Glow(color=#000000,Strength=7) ; </div>
<br> <br> <br> <div id=id_div3>苏昱作品·版权所有<br><span id=id_span3>©2002 Rainer Su . All rights reserved .</span></div> </body> </html>
css
- 2楼网友:独行浪子会拥风
- 2021-04-27 21:02
- 3楼网友:怀裏藏嬌
- 2021-04-27 19:48
用滤镜,不过,,,这个 只ie支持