网站建设资讯

NEWS

网站建设资讯

css投影样式,常见投影类型

CSS里如何写投影

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ""

创新互联为客户提供专业的网站建设、成都网站建设、程序、域名、空间一条龙服务,提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、成都手机网站制作等网站方面业务。

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

怎样用css制作文字渐变和投影啊?求高手解答啊

css是网站的样式,不能达到这种效果,你看到的这个效果是ps工具可以实现

随便网站找个视频,花个10分钟看完投影和渐变的做法 你也能完成

怎么用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

效果如图:

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

如何在CSS中给像片加投影效果

右边框设个宽度,边框颜色设成深灰色,下边框同理.就出来投影效果啦.


分享标题:css投影样式,常见投影类型
转载来源:http://cdweb.net/article/dsieogs.html