正文
css投影样式,常见投影类型
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
CSS里如何写投影
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ""
html xmlns="" xml:lang="en"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titleUntitled Document/title
style type="text/css"
div#pic{
background: url() left top;
width: 151px;
height: 47px;
border: 1px solid #000000;
}
div#shadow{
width: 151px;
height: 47px;
background: #CCCCCC; /*阴影颜色*/
position: relative; /*设置阴影图层的位置为相对定位*/
left: 5px;
top: -44px;
z-index: -1; /*把阴影图层置于最底层*/
}
/style
/head
body
div id="pic"/div
div id="shadow"/div
/body
/html
相关问答
Q1: 怎样用css制作文字渐变和投影啊？求高手解答啊
css是网站的样式，不能达到这种效果，你看到的这个效果是ps工具可以实现
随便网站找个视频，花个10分钟看完投影和渐变的做法 你也能完成
Q2: 怎么用CSS做图层的投影效果？
用CSS做图层的投影效果,css2是做不到的，在css3中，我们可以通过box-shadow 内阴影与外阴影来实现，用法是，E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}，对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}；这里我们通过代码来理解：
html
head
style
#nav{
width:900px;
height:30px;
-moz-box-shadow:5px 5px 5px #999 inset;
-webkit-box-shadow:5px 5px 5px #999 inset;
box-shadow:5px 5px 5px #999 inset;
}
/head
body
div class="nav"
/div
/body
/html
效果如图：
Q3: html css怎么使图片投影成这个样子，如图，后面是一层投影效果
复制下面代码就可以看到效果了：
前两个属性设置阴影的 X / Y 位移，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。现在很对浏览器对css3支持不给力，就像IE现在还不支持阴影效果，但可以上百度搜一个.htc格式文件，链接就可以了。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style
.img{
width:142px;
height:41px;
-webkit-box-shadow: 10px 10px 14px #737373;!--（这是专对火狐浏览器的支持而设置的）--
-moz-box-shadow: 10px 10px 14px #737373;!--（这是对Safari和Chrome浏览器而设置的）--
box-shadow: 10px 10px 14px #737373;
}
/style
/head
body
img src="" class="img"/
/body
/html
Q4: 如何在CSS中给像片加投影效果
右边框设个宽度,边框颜色设成深灰色,下边框同理.就出来投影效果啦.
