html css怎么使图片投影成这个样子,如图,后面是一层投影效果

html-css020

html css怎么使图片投影成这个样子,如图,后面是一层投影效果,第1张

复制下面代码就可以看到效果了:

         前两个属性设置阴影的 X / Y 位移,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色。现在很对浏览器对css3支持不给力,就像IE现在还不支持阴影效果,但可以上百度搜一个.htc格式文件,链接就可以了。

<!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">

<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="file:///F|sy_ico.jpg"  class="img"/>

</body>

</html>

html figure和image的区别如下:1、figure元素是一种元素的组合,可带有标题(可选)。figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。figure拥有一个子标签——figcaption标签。实例:用作文档中插图的图像:<figure><p>黄浦江上的的卢浦大桥</p><img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure>2、img 元素向网页中嵌入一幅图像。这个标签并不会在网页中插入图像,而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。用法如下:<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />区别:figure用于对元素进行组合。多用于图片与图片描述组合。而img只是一个图片元素而已。可以嵌套在figure中使用。