打印

[求助] 如何规避阴影滤镜对子元素的影响？[使表格阴影不对内容产生影响]

west2504 [楼主]

初级会员

帖子: 67
体力: 187
威望: 0
离线: 53 天

1^# 大中小发表于 2008-4-22 15:21

对表格使用了阴影滤镜，
没想到表格中的所有内容也都产生了阴影，
只好为表格加上背景颜色来屏蔽单元格内文字的阴影，
不过仍有缺失，请见如下示例
（不知道各位坛友是否有加表格背景以外的方法来屏蔽表格阴影对表格内容的影响）
：

<html>
	<head>
		<style>
.tbNoShadow,.tbWithShadow{
	BORDER: #97a0c7 1px solid; 	
	POSITION: relative; 
	BORDER-COLLAPSE: collapse;
}
.tbWithShadow{
	filter:progid:DXImageTransform.Microsoft.Shadow 
(Color=#AAAAAA,Direction=120,strength=2);
}
.tableBodyHead{
	background-color: #dddddd;
	
}
.tdWhithBackgroundColor{
 background-color:#fff;
}
</style>
	</head>
	<body>
<p>
对表格使用了阴影滤镜，<br/>
没想到表格中的所有内容也都产生了阴影，<br/>
只好为表格加上背景颜色来屏蔽单元格内文字的阴影，<br/>
不过仍有缺失，请见如下示例<br/>
（不知道各位坛友是否有加表格背景以外的方法来屏蔽表格阴影对表格内容的影响）<br/>
：
</p>
	<table class="tbNoShadow"  cellpadding="1" cellspacing="1">
		<tr>
			<td>这是tb1</td>
		</tr>
		<tr>
				<td class="tableBodyHead"align="center">
					&nbsp;标题行：此行文字没有阴影，背景颜色正常
				</td>
			</tr>
		<tr>
			<td>				
					此行字无阴影
			</td>
		</tr>
		<tr>
			<td>
			只有正常在
			</td>
		</tr>
	</table>
<br/>
	<table class="tbWithShadow">
		<tr>
			<td>这是tb2，加了阴影滤镜</td>
		</tr>
		<tr>
				<td class="tableBodyHead">
					&nbsp;标题行：此行字无阴影，但背景颜色有异，如何才能将此行背景颜色调整得与tb1的标题行一般正常
				</td>
			</tr>
			<tr>
				<td class="tdWhithBackgroundColor">
					因为加了背景颜色此行字无阴影background-color:#fff;
				</td>
			</tr>
			<tr>
		
			
		</table>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 west2504 于 2008-4-22 15:29 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

west2504 [楼主]

初级会员

帖子: 67
体力: 187
威望: 0
离线: 53 天

2^# 大中小发表于 2008-4-23 14:06

晕倒，是我的问题没说清楚？

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

biyibird

嘟大侠

中级会员

帖子: 203
体力: 220
威望: 1
当前: 湖南长沙

专长 网页设计,前端制作,策划

3^# 大中小发表于 2008-4-24 08:43

有必要这么做不？想要给哪个TD加阴影，就把CLASS落到那个TD上就行了。给到整个TABLE上没必要嘛。

http://258754.cn

TOP

请大家尊重和保护奥运知识产权。

west2504 [楼主]

初级会员

帖子: 67
体力: 187
威望: 0
离线: 53 天

4^# 大中小发表于 2008-5-3 12:34

我只想要table有阴影而不影响到td

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

biyibird

嘟大侠

中级会员

帖子: 203
体力: 220
威望: 1
当前: 湖南长沙

专长 网页设计,前端制作,策划

5^# 大中小发表于 2008-5-3 17:12

源自《无懈可击的Web设计》第七章,我把阴影改成了暗红色：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Chapter 7: Convertible Tables</title>
<style type="text/css" media="screen">
body {
  	margin: 0;
  	padding: 30px;
  	font-family: "Lucida Grande", Arial, sans-serif;
  	font-size: small;
  	background: #b5b5b5;
  	}	
a { 
	color: #77985C; 
	}
.forums {
  	line-height: 1.5em;
  	background: #990000;
  	}
table {
  	width: 100%;
  	position: relative;
  	top: -4px;
  	left: -4px;
  	border: 1px solid #000;
  	background: #fff;
  	}
table caption {
  	margin: 0;
  	padding: 8px 20px;
  	text-align: left;
 	border: 1px solid #000;
  	border-bottom: none;
 	background: #fff;
  	}
table th, table td {
  	margin: 0;
  	padding: 8px 20px;
  	text-align: center;
  	border-bottom: 1px solid #b5b5b5;
  	}
table th {
  	color: #999;
  	}
table .name {
  	text-align: left;
  	}
table tr {
  	background: #e6e6e6;
  	}
table tr.alt {
  	background: #f1f1f1;
  	}
table td a {
  	display: block;
  	font-weight: bold;
  	}
</style>
</head>
<body>
<div class="forums">
<table cellspacing="0">
  	<caption>The Films</caption>
	<tr>
		<th scope="col" class="name">Forum Name</th>
		<th scope="col">Topics/Messages</th>
		<th scope="col">Last Post</th>
	</tr>
	<tr class="alt">
		<td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td>
		<td>9313/163773</td>
		<td>Feb 28, 2005 04:21 PM</td>
	</tr>
	<tr>
		<td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td>
		<td>9313/163773</td>
		<td>Feb 28, 2005 04:21 PM</td>
	</tr>
	<tr class="alt">
		<td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td>
		<td>9313/163773</td>
		<td>Feb 28, 2005 04:21 PM</td>
	</tr>
</table>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 biyibird 于 2008-5-3 17:15 编辑 ]

http://258754.cn

TOP

west2504 [楼主]

初级会员

帖子: 67
体力: 187
威望: 0
离线: 53 天

6^# 大中小发表于 2008-7-1 11:18

楼上——嘟大侠提供的实现阴影的方式很不错，谢谢分享。
当初这种类似的方式我也有搜索到，不过自己太懒结果选择了只适用IE的过滤器来实现阴影：）

TOP

expression

高级会员

帖子: 906
体力: 715
威望: 0
离线: 5 天

7^# 大中小发表于 2008-7-1 14:09

外框有阴影里边没阴影的表格

<table cellspacing=0 cellpadding=0 width=350 align=center border=0 >
  <tr> 
    <td valign=bottom align=right width=347 rowspan=2> 

<table cellspacing=0 cellpadding=0 width="100%" height="200" border=0 style="border:solid 1px #000000" bgcolor="white">
        <tr>
		<td><center><img src="http://bbs.blueidea.com/images/smilies/default/rolleyes.gif"><br>
<style>body {font:12px verdana}</style>
<script defer>
function showTimeBeforeChrismas(){
leaveTime=new Date("August 8,2008")-new Date();
leaveDays=Math.floor(leaveTime/(1000*60*60*24));
leaveHours=Math.floor(leaveTime/(1000*60*60)%24);
leaveMinutes=Math.floor(leaveTime/(1000*60)%60);
leaveSeconds=Math.floor(leaveTime/1000%60);
leaveChrismas.innerText=leaveDays+"天"+leaveHours+"时"+leaveMinutes+"分"+leaveSeconds+"秒";
}
setInterval(showTimeBeforeChrismas,1000);
</script>
距离北京奥运会还有<span id="leaveChrismas"></span><br>
</td>
        </tr>
      </table>

    </td>
    <td width=1 bgcolor=#ffffff height=5></td>
    <td width=1 bgcolor=#ffffff height=5></td>
    <td width=1 bgcolor=#ffffff height=5></td>
  </tr>
  <tr>
    <td width=1 bgcolor=#333333 height=120></td>
    <td width=1 bgcolor=#666666 height=120></td>
    <td width=1 bgcolor=#999999 height=120></td>
  </tr>
  <tr valign=top align=right> 
    <td colspan=4>
      <table cellspacing=0 cellpadding=0 width="345">
        <tr> 
          <td bgcolor=#333333 height=1></td>
        </tr>
        <tr> 
          <td bgcolor=#666666 height=1></td>
        </tr>
        <tr> 
          <td bgcolor=#999999 height=1></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr valign=center align=right> 
    <td colspan=4 height=35>&nbsp;</td>
  </tr>
</table>

提示：您可以先修改部分代码再运行

彳亍日寺米青女少言亥言兑金童女子

TOP