用相对定位和负向移动完成图片象框阴影

2016-02-19 17:27 10 1 收藏

今天图老师小编给大家精心推荐个用相对定位和负向移动完成图片象框阴影教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~

【 tulaoshi.com - Web开发】

先看看代码，十分简单：

以下是引用片段：
style
.out {
position:relative;
background:#bbb;
margin:10px auto;
width:285px
}
.in {
background:#fff;
border:1px solid #555;
padding:10px 5px;
position:relative;
top:-5px;
left:-5px;
}
/style

div class="out"
div class="in"
img src="/imagelist/06/24/k6xq28872yvo.jpg" alt="" /
/div
/div

style
.out {
position:relative;
background:#bbb;
margin:10px auto;
width:285px
}
.in {
background:#fff;
border:1px solid #555;
padding:10px 5px;
position:relative;
top:-5px;
left:-5px;
}
/style

div class="out" div class="in" img src="/imagelist/06/24/k6xq28872yvo.jpg" alt="" / /div/div
运行代码复制代码另存代码

来源:http://www.tulaoshi.com/n/20160219/1615257.html

上一篇：用 Joomla! 搭建一个社会网络站点
下一篇：在Delphi中巧改窗体文件实现控件数组

看过《用相对定位和负向移动完成图片象框阴影》的人还看了以下文章更多>>

WPS文字如何设置文本框阴影效果及更改阴影颜色

标签：电脑应用计算机应用技术

文本框孤立的存在于文档中，略显单调，那么如何让它看起来更好看一些呢？方法有很多，不过最简单的还是对文本框加一些阴影效果，可以根据需要设置阴影的颜色及将所选对象阴影移动等等，这些在本文都有很详细的介绍。插入文本框 1、在文档中插入文本框。依次单击“插入”—“文本框”—“横向文本框&rdq...

图片移动循环

标签： flash教程

关于动画图片的循环，最主要的是遵循一个原则，就是第一个镜头画面要和最后一个镜头的画面一致。如图： 740)this.width=740" border=undefined> 见红色的框，红色框也是镜头的规格，在做循环的时候，只要将图片开头红色的取景图片拷贝到最后，保持着第一个取景的图片和最后一个取景的图片一样，循环就可以成立了！制作见下...

CSS实战：利用CSS相对定位进行多行多列布局

标签： Web开发

CSS制作网页的实例，利用CSS相对定位进行多行多列布局。 !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 styl...

VC 对话框设置背景颜色和图片

标签：编程语言网络编程

改变背景颜色，有两种方法： 1、在app的初始化函数中调用： void SetDialogBkColor( COLORREF clrCtlBk = RGB(192, 192, 192), COLORREF clrCtlText = RGB(0, 0, 0) ); 2、在对话框类的OnCtlColor函数中： if(nCtlColor == CTLCOLOR_DLG) { CBrush *brush; brush = new CBrush(RGB(221,221,221)); return (HBRU...

绝对定位(absolute)和浮动定位(float)

标签： Web开发

在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结...

查看更多精彩>>