正文
shadowcss样式,css中shadow
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
CSS实现表格阴影
1、实践代码：
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
titleCSS实现表格阴影/title
/head
body
table width=300 height=215 align=left bordercolor="#FF9966" bgcolor=#f3f3f3
style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#666666,Direction=120,strength=5)"
tr
td width="230" bgcolor="#FF9966" align="center"
这是一个表格阴影特效，用CSS实现的。/a
/td
/tr
/table
/body
/html
2、用纯CSS代码实现的表格阴影代码，这里仍然是用到了filter属性，至于阴影阴影透明义或偏移角度可以自选调整，仅提供一种思路。
相关问答
Q1: css投影样式
text-shadow: 5px 5px 5px #FF0000;
水平阴影、垂直阴影、模糊距离，以及阴影的颜色
Q2: CSS之box-shadow属性
CSS box-shadow 属性用于在元素的框架上添加阴影效果。
当给出两个、三个或四个 length 值时：
你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。 阴影绘制由最后一个开始 ， 故第一个设置的阴影将覆盖在后设置的阴影之上。
利用此特性可以给上下左右边框设置不同样式的阴影效果：
Q3: CSS样式文本的虚化效果怎么做?
文本虚拟化效果可以通过css的text-shadow来实现。
text-shadow语法:
text-shadow ： none | length none | [shadow, ] * shadow 或none | color [, color ]*
也就是：
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)].
例子：
.demo {background: #666666;width: 440px;padding: 30px; font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;color: #fff;text-transform: uppercase;}
Q4: js设置css怎么使用-moz-box-shadow？？
-moz-, -webkit-, -o-这些都是浏览器前缀。box-shadow才是css样式。
通过js获取css的box-shadow的方法：
div
{
box-shadow: 10px 10px 5px #888888;
}
js方法：
document.div[0].style.box-shadow = "12px 11px 5px #888888;";
常用前缀和浏览器的对应关系如下：
Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-
css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程，css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险，同时也会出现有的浏览器厂商支持的好，有的支持的不好，所以就用厂商前缀加以区分。
PPK建议如果已成为REC或接近REC的属性，厂商如果完全实现了w3c的test case，就不用加厂商前缀，像border-radius在ie9下就不用加前缀。
Q5: 这个网站半透明下拉菜单怎样做的呢
以下整理的代码来自楼主提提供的网站，经本人本机测试可以正常使用。
script language="javascript" src="menu.js"/script
style type="text/css"
!--
body {
font-size: 9pt;
background-color: #000;
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
.menuskin{
position: absolute;
filter: Alpha(Opacity=80);
-Moz-Opacity:0.8;
background-color: #000;
padding-left: 20px;
border: 2px solid #666;
background-image: url(menubar.gif);
background-repeat: repeat-y;
background-position: left top;
visibility:hidden;
}.menuskin a{
display: block;
color: #FFF;
margin: 5px;
width: 80px;
padding: 3px; border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999;
}
.menuskin a:hover{
color: #000;
background-color: #EEE;
}
.menu a,.menu span{
margin-top: 3px;
background-image: url(line_02.gif);
}
.menu a,.menu span{
float: left;
color: #999;
background-repeat: no-repeat;
background-position: right center;
padding-right: 8px;
padding-left: 8px;
}
.menu a:hover{
background-color: #000;
color: #FFF;
}
--
/style
!--将下面部分放到显示菜单的地方--
div class="menu"
script language="javascript" src="classmenu.js"/script
/div
!--以下是menu.js的内容--
//菜单
var menuOffX=0 //菜单距连接文字最左端距离
var menuOffY=20 //菜单距连接文字顶端距离
var ie4=document.allnavigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById!document.all
function showmenu(e,vmenu,mod){
which=vmenu
menuobj=document.getElementById("popmenu")
menuobj.thestyle=menuobj.style
menuobj.innerHTML=which
menuobj.contentwidth=menuobj.offsetWidth
eventX=e.clientX
eventY=e.clientY
var rightedge=document.body.clientWidth-eventX
var bottomedge=document.body.clientHeight-eventY
if (rightedgemenuobj.contentwidth)
menuobj.thestyle.left=document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX
else
menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
if (bottomedgemenuobj.contentheightmod!=0)
menuobj.thestyle.top=document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23
else
menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
menuobj.thestyle.visibility="visible"
}
function ie_y(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
function ie_x(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
function hidemenu(){if (window.menuobj)menuobj.thestyle.visibility="hidden"}
function dynamichide(e){if ((ie4||ns6)!menuobj.contains(e.toElement))hidemenu()}
document.onclick=hidemenu
document.write("div class=menuskin id=popmenu onmouseover=highlightmenu(event,'on') onmouseout=highlightmenu(event,'off');dynamichide(event)/div")
//菜单END
!--以下是classmenu.js的内容,格式为：document.write("a href='#' onMouseOver=\"showmenu(event,'a href=#二级菜单/a')\" 主菜单/a");--
document.write("a href='/xiazai/gamemuma/' onMouseOver=\"showmenu(event,'a href=/xiazai/gamemuma/307/推荐软件/a')\" 常用软件/a");
document.write("a href='/xiazai/AnQuan/' onMouseOver=\"showmenu(event,'a href=/xiazai/AnQuan/308/精品源码/aa href=/xiazai/AnQuan/326/本站出品/a')\" 精品源码/a");
document.write("a href='/xiazai/DongHua/' onMouseOver=\"showmenu(event,'a href=/xiazai/DongHua/263/必备最新工具/aa href=/xiazai/DongHua/264/精品视频教程/aa href=/xiazai/DongHua/265/本站出品/a')\" 菜鸟黑客区/a");
document.write("a href='/xiazai/Code/' onMouseOver=\"showmenu(event,'a href=/xiazai/Code/319/推荐软件/a')\" 营销软件/a");
document.write("a href='/xiazai/BOOK/' onMouseOver=\"showmenu(event,'a href=/xiazai/BOOK/320/相关教程/aa href=/xiazai/BOOK/321/所用工具/a')\" 刷QQ业务专区/a");
