网页阴影代码（网页阴影怎么处理）

本篇文章给大家谈谈网页阴影代码，以及网页阴影怎么处理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、网页背景阴影在css里代码怎么写，如下图。把网页保存到本地后，这个阴影连同白色的底都没了，求解
• 2、网页制作边框阴影
• 3、网页设计中这个阴影是怎么做的 有具体代码最好~
• 4、网页设计，HTML，如图中的阴影框，求代码

网页背景阴影在css里代码怎么写，如下图。把网页保存到本地后，这个阴影连同白色的底都没了，求解

那个阴影是用png透明图片做出来的，css没有半透明的样式，顶多是用滤镜半透明，不过滤镜兼容性太差了，一般做网页的人不到没有办法是不用的

例如一个带阴影的弹出框，就需要切8张透明的png图片

左上角、右上角、左下角、右下角、上边、下边、左边、右边

其中上边和下边的是作X轴背景平铺，宽度设为1px，左边和右边是作Y轴背景平铺，高度为1px

当然要出效果并非一定是要8张图片，只是这样切的话图片会比较小，弹出框的可伸缩性更强

网页制作边框阴影

这有个例子，应该是你需要的

html

head

title用CSS实现表格边框阴影效果/title

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

style

body {

margin: 0px;

padding: 20px;

font-family: verdana;

font-size: 12px;

}

/* CSS container shadow */

#shadow-container {

position: relative;

left: 3px;

top: 3px;

margin-right: 3px;

margin-bottom: 3px;

}

#shadow-container .shadow2,

#shadow-container .shadow3,

#shadow-container .container {

position: relative;

left: -1px;

top: -1px;

}

#shadow-container .shadow1 {

background: #F1F0F1;

}

#shadow-container .shadow2 {

background: #DBDADB;

}

#shadow-container .shadow3 {

background: #B8B6B8;

}

#shadow-container .container {

background: #ffffff;

border: 1px solid #848284;

padding: 10px;

}

/* CSS container shadow */

/style

/head

body

div id="shadow-container"

div class="shadow1"

div class="shadow2"

div class="shadow3"

div class="container"

用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果

/div

/div

/div

/div

/div

brbr

div class="shadow1"

用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果 /div

br /

div id="shadow-container"

div class="shadow1"

div class="shadow2"

div class="shadow3"

div class="container"

用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果

/div

/div

/div

/div

/div

/body

/html

网页设计中这个阴影是怎么做的 有具体代码最好~

方法有很多种，常用的其实有两种：

1# 直接添加CSS3阴影

.style {

-moz-box-shadow: 0 0 8px black;

-webkit-box-shadow: 0 0 8px black;

box-shadow: 0 0 8px black;

}

box-shadow: 上偏移 左偏移 投影大小 投影颜色（支持rgba透明）

这种方法的弊端是必须支持CSS3的浏览器，低版本浏览器一把不兼容，是看不到这个效果的，例如ie6 7 8

2# 用png图做投影

方法就是将投影切一个透明图，然后放在你需要加投影的盒子外面，见图：

给box加一个背景， 内容放在里面的content里，搞定

网页设计，HTML，如图中的阴影框，求代码

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

style

body{

background-color: #0066CC;

}

h1{

position: absolute;

}

.box{

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

margin: 0 auto;

width: 800px;

height: 700px;

background-color: #666;

}

.con{

position: absolute;

top: 400px;

left:300px;

color: #fff;

}

/style

/head

body

h1你好 看见div是透明了么!/h1

div class="box"

/div

div class="con"

h2

你想写一些什么呢

/h2

p 不如先采纳了吧/p

/div

/body

/html

关于网页阴影代码和网页阴影怎么处理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。