|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
 請教：如何可以讓表格兩邊都有陰影？？
如題！ |
| 頂一個,我也想知道 |
| 我也頂一個。 |
參見
http://bbs.blueidea.com/viewthread.php?tid=1718295 |
表格邊框逐漸加大時本身就形成了明暗對比的陰影。
做成像一個按鈕式的表格，鼠標以上去表格邊上出現動態陰影：
[html]
<style>
.style1 {background-color:#CCCCCC;border-left:1px solid #F5F5F5;border-top:1px solid #F5F5F5;border-right:1px solid #333333;border-bottom:1px solid #333333;width:80px;height:20px;}
.style2 {background-color:#CCCCCC;border-left:1px solid #000000;border-top:1px solid #000000;border-right:1px solid #F5F5F5;border-bottom:1px solid #F5F5F5;width:80px;height:20px;}
</style>
<center>
<table id=myButton class=style1 onmouseover=this.className='style2' onmouseout=this.className='style1'><tr><td align=center>Click Here</td></tr></table>
[/html] |
| 如果想達到那種效果，怎麼理解「blur型、glow型對表格或文字的模糊虛邊」？？ |
這是一種glow型的虛邊
[html]
<center>
<!-------語 法 開 始------->
<SPAN style="FILTER: Chroma(Color=green) glow(color:6655ff,strength=3);height:1">
<input type=button value='按 耐 不 住 的 沖 動' onClick=window.open('http://dob.tnc.edu.tw/index.php','_blank') style='background-color:green;border:1px solid white;font-size:12px;color:white;height:22;'>
</SPAN>
<!-------語法結束------->
<br><br><br><br>
<center>
<SPAN style="FILTER: Chroma(Color=green) glow(color:b73dff,strength=3);height:1;width:302">
<textarea type=text name="" style='background-color:green;border:1px double white;font-size:15px;color:white;height:120;width:300' onmouseover=this.focus()>
請輸入內容
</textarea>
</SPAN>
[/html]
shadow型的陰影
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<STYLE type=text/css>BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "細明體"
}
A {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
}
A:active {
FONT: 9pt "細明體"; CURSOR: hand; COLOR: #ff0033
}
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
my_tips.style.display="";
if (url!=null){my_tips.innerHTML="<img src='"+url+"'align=left>"+tips;}
else{ my_tips.innerHTML=tips;}
my_tips.style.left=event.clientX+10;
my_tips.style.top=event.clientY+10;
}
else
{
my_tips.style.display="none";
}
}
</script>
<a href="#" tips="自定義提示" onmousemove=show(this.tips,1) onmouseout=show(this.tips,0)>測試鏈接</a>
<a href="#" tips="又一個自定義提示" onmousemove=show(this.tips,1,'19.gif') onmouseout=show(this.tips,0)>測試鏈接</a>
<a href="#" tips="中華人民共和國中華人民共和國自定義提示" onmousemove=show(this.tips,1,'47.gif') onmouseout=show(this.tips,0)>測試鏈接</a>
<div id=mytips style="position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);">
</div>
[/html]
注意下面的大表格的兩邊，它用了透明度變化造成了「虛邊」。
[html]
<style>
.ex{ filter: Alpha(Opacity=60, Style=1,);
}
.ex1{ filter: Alpha(Opacity=60, Style=1, StartX=60, FinishX=0,);
}
</style>
<body link="#ff0000" vlink="#ff0000" alink="#ff0000" onload="self.focus()" scroll="auto">
<table width="100%" cellspacing="0" cellpadding="0" height="500px;">
<tr>
<td width="10px;" bgcolor="#999999" class="ex1"> </td>
<td>
<center>
<table width="300">
<tr bgcolor="yellow">
<td>因為地球是圓的,所以我又回來了</td>
<td bgcolor="blue">驚回首，離天三尺三！</td>
</tr>
</table>
<br><br><br>
<table align=center width=200 height=100 bgcolor=#f3f3f3
style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
<tr>
<td><center>www.cnbruce.com</td>
</tr>
</table>
<br><br><br>
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"cyan":"blue")}
-->
</style>
<center>
<table>
<tr><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td></tr>
</table>
</td>
<td width="10px;" bgcolor="#999999" class="ex"> </td>
</tr>
</table>
[/html]
|
marvellous 了不起！
謝謝，比如象www.ylog.net那種網站的陰影效果是不是在背景加的圖片呢？ |
點其虛影部分，有「背景另存為」，肯定是用了背景圖片，background-image: url(Images/bg.gif);
也可用我上面提到的第三種在大表格兩邊造虛邊的方法。 |
|
