Html代码
<div>
<img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
<div>
<p>CSS3 逐渐发光的方格边框</p>
<p>CSS3 逐渐发光的方格边框</p>
</div>
</div>
Css代码
.light{
background: #fff
width: 180px
height: 180px
margin: 100px auto
position: relative
text-align: center
color: #333
transform:translate3d(0,0,0)
}
.light-inner{
padding: 60px 30px 0
pointer-events: none
position: absolute
left: 0
top: 0
bottom: 0
right: 0
text-align: center
transition: background 0.35s
backface-visibility: hidden
}
.light-inner:before, .light-inner:after{
display: block
content: ""
position: absolute
left: 30px
top: 30px
right: 30px
bottom: 30px
border: 1px solid #fff
opacity: 0
transition: opacity 0.35s, transform 0.35s
}
.light-inner:before{
border-left: 0
border-right: 0
transform:scaleX(0,1)
}
.light-inner:after{
border-top: 0
border-bottom: 0
transform: scaleY(1,0)
}
.light:hover .light-inner{
background: #458fd2
}
.light:hover .light-inner:before, .light:hover .light-inner:after{
opacity: 1
transform: scale3d(1,1,1)
}
.light-inner p{
transition: opacity .35s, transform 0.35s
transform: translate3d(0,20px,0)
color: #fff
opacity: 0
line-height: 30px
}
.light:hover .light-inner p{
transform: translate3d(0,0,0)
opacity: 1
}
#phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray()WIDTH: 225pxHEIGHT:45pxmargin-top:12px}.f14 {color:#0E5990}BODY { SCROLLBAR-FACE-COLOR: #BAEEFCSCROLLBAR-HIGHLIGHT-COLOR: #ffffffSCROLLBAR-SHADOW-COLOR: #ffffffSCROLLBAR-3DLIGHT-COLOR: #ffffffSCROLLBAR-ARROW-COLOR:#ffffffSCROLLBAR-TRACK-COLOR: #ffffffSCROLLBAR-DARKSHADOW-COLOR: #ffffffPADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 12pxPADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-TOP: 0pxFONT-FAMILY: Verdana, Arial, Helvetica, sans-serifcolor:#5cbce7background:#D4F0FD}#main {BACKGROUND: url(http://hiphotos.baidu.com/coocoo/pic/item/b9e1d8f921c91a59242df2b7.jpg) no-repeat 18px 0px}#header{ HEIGHT: 297pxmargin-left:223px}#header div.tit a.titlink{font-size:14pxcolor:#fffffftext-decoration:none}#header div.tit a.titlink:visited{font-size:14pxcolor:#fffffftext-decoration:none}#header div.desc{top:136pxleft:53pxcolor:#fffffffont-size:12px}#header div.tit{top:116pxleft:53px}#tab{top:248px}#tab a.on,#tab a.on:link,#tab a.on:visited{line-height:150%background-color:color:#fffffffont-size:13px}#tab span{color:#fffffffont-size:13pxline-height:120%display:none}#tab a:link{color:#fffffftext-decoration:nonefont-size:13pxvertical-align:topline-height:150%}#tab a:visited{color:#fffffftext-decoration:nonefont-size:13pxvertical-align:topline-height:150%}#tab2 span{color:#176A8Dfont-size:13pxfont-weight:bold}#tab2 a{font-size:12pxfont-weight:bold}#tab2 a:link{color:#330000}#tab2 a:visited{color:#330000}.stagepad {width:633pxmargin-left:44px }.stagepad a:link{text-decoration:nonefont-weight:bold}.stagepad a:visited{text-decoration:nonefont-weight:bold}#layout {width:926pxmargin-left:0pxbackground:url(http://hiphotos.baidu.com/coocoo/pic/item/3fc46159ddceae2a2934f0b7.jpg
) no-repeat bottom 8pxpadding-bottom:50px}#m_blog {padding-top:30px}.stage {background:url(http://hiphotos.baidu.com/coocoo/pic/item/3117d62a97ba5f2dd52af1b7.jpg
) repeat-y 8px 0px}#m_blog div.cnt a {text-decoration:nonecolor:#176A8D}#m_blog div.cnt a:visited {text-decoration:nonecolor:#176A8D}#m_blog div.cnt a:hover {border-bottom:1px #176A8D dashedcolor:#176A8D}#layout td.c2t3{padding-right:14pxwidth:234px}#layout td.c2t1{padding-left:55pxwidth:100%border-right:#930000 0px solid}#layout td.c2t2{width:22px}#mod_bloglist{}#comm_info{color:#176A8Dfont-family:Arialtext-align:centerpadding-top:19pxTEXT-INDENT:px}#comm_info div.line{margin-top:0pxborder-top:0px solid #5C85BB}#comm_info a{color:#176A8Dtext-decoration:none}#comm_info a:visited{color:#176A8Dtext-decoration:none}#page{height:30pxfont-size:12pxfont-family:Arialtext-align:center}#page span{padding:3pxcolor:#1a4a8afont-size:14pxfont-weight:bold}#page a.pc{color:#176A8Dfont-size:14pxfont-weight:bold}#page a.pc:visited{color:#176A8D}#page a.pi{padding:3pxcolor:#176A8Dfont-size:14px}#page a.pi:visited{color:#176A8D}.mod{margin-bottom:28px}.modhandle{cursor:move}.modth{height:0px}.modhead{padding:0px 4px 0 4pxpadding-top:0pxpadding-bottom:6pxbackground:url(http://hiphotos.baidu.com/iyaya/abpic/item/1dd54323b6c5d5529822edc0.jpg
" target="_blank" >http://hiphotos.baidu.com/iyaya/abpic/item/1dd54323b6c5d5529822edc0.jpg
) no-repeat 40px 0pxTEXT-INDENT: 0pxLINE-HEIGHT:17pxborder-bottom:#76B7D3 1px dashedtext-align:center}.modopt{padding:4px 4px 0 0}.modtit{color:#0E5990font-size:13pxfont-weight:bold}a.modtit{color:#176A8D}a.modtit:visited{color:#176A8D}.modtitlink{color:#0E5990font-size:12pxfont-weight:bold}a.modtitlink{color:#0E5990text-decoration:none}a.modtitlink:visited{color:#0E5990text-decoration:none}a.modtitlink:hover{color:#FF5100text-decoration:none}.modact{color:#176A8Dfont-size:12pxtext-align:center}a.modact:link{color:#176A8D}a.modact:visited{color:#176A8D}.modbox{padding:0px 0px 0 0px}.modtl{}.modtc{}.modtr{}.modbl{line-height:1px}.modbc{line-height:1px}.modbr{line-height:1px}#m_blog {padding-left:15pxpadding-right:15pxmargin-top:10px}#m_blog div.tit{padding-top:1pxqpadding-bottom:3pxcolor:#3A9BC5font-size:13pxfont-weight:boldtext-decoration:noneborder-bottom:1px dashed #3295BFborder-top:1px dashed #3295BFTEXT-INDENT: 119pxline-height:25pxbackground:#D6EEFA}#m_blog div.tit a{color:#3A9BC5font-size:13pxfont-weight:boldtext-decoration:none}#m_blog div.tit a:visited{color:#3A9BC5text-decoration:none}#m_blog div.date{font-size:13pxmargin:-23px 0 8px 0color:#3A9BC5TEXT-INDENT: 7pxfont-weight:bold}#m_blog div.cnt{color:#176A8Dline-height:20pxfont-size:13pxPADDING-RIGHT: 10pxPADDING-LEFT: 10pxPADDING-TOP: 10pxPADDING-bottom: 10px}#m_blog div.more{margin:14px 0 16px 0text-decoration:nonefont-weight:bold}#m_blog div.more a{color:#3A9BC5font-size:14pxtext-decoration:nonefont-weight:bold}#m_blog div.more a:visited{color:#3A9BC5text-decoration:nonefont-weight:bold}#m_blog div.opt{color:#176A8Dfont-size:12px}#m_blog div.opt a{color:#176A8Dfont-size:12pxtext-decoration:none}#m_blog div.opt a:visited{color:#176A8Dtext-decoration:none}#m_blog div.line{margin-top:17pxline-height:17px}#m_blog div.none{padding:100px 0 100px 0color:#1a4a8afont-size:14px}#m_pro {text-align:centerpadding-left:15pxpadding-right:10px}#m_pro a{color:#176A8Dfont-weight:boldtext-decoration:nonetext-align:center}#m_pro a:visited{color:#176A8Dfont-weight:boldtext-decoration:none}#m_pro div.image{text-align:centerborder-bottom:#76B7D3 1px solidpadding-top:10pxpadding-bottom:10px}#m_pro div.act{margin-top:10px}#m_pro div.user{color:#176A8Dfont-size:12pxfont-weight:bold}#m_pro div.desc{color:#176A8Dfont-size:12px}#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #1A4A8A}#m_pro td{color:#176A8Dline-height:24pxfont-size:14px}#m_album div.image{text-align:centerpadding-top:30px}#m_album div.page{color:#176A8Dfont-size:12pxtext-align:center}#m_album div.page a{color:#330000font-size:12px}#m_album div.page a:visited{color:#330000}#m_links {padding-left:18pxpadding-right:18pxtext-align:centerborder-top:0px solid #76B7D3}#m_links div.item{color:#7EBBD7font-size:12pxLINE-HEIGHT: 21px}#m_links div.item a{color:#176A8Dfont-size:12pxtext-decoration:none}#m_links div.item a:visited{color:#176A8D}#m_links div.line{display:none}#m_artclg {border-top:0px solid #5C85BBpadding-top:5px}#m_artclg div.item{color:#176A8Dfont-size:12pxtext-align:centerpadding-left:0px}#m_artclg div.item a{color:#176A8Dfont-size:12pxtext-decoration:none}#m_artclg div.item a:visited{color:#176A8Dtext-decoration:none}#m_artclg div.line{margin-top:0pxline-height:5pxborder-top:0px solid #76B7D3}#m_comment {padding-top:10px}#m_comment div.item{color:#176A8Dfont-size:12pxpadding-left:10pxpadding-right:10pxborder-top:1px solid #76B7D3TEXT-INDENT: 0pxLINE-HEIGHT: 20pxmargin-left:7pxmargin-right:7pxpadding-top:5px}#m_comment div.item a{color:#176A8Dfont-size:12pxtext-decoration:nonefont-weight:boldpadding-left:60pxpadding-bottom:43pxbackground:url(http://hiphotos.baidu.com/iyaya/abpic/item/1dd54323b6c5d5529822edc0.jpg
" target="_blank" >http://hiphotos.baidu.com/iyaya/abpic/item/1dd54323b6c5d5529822edc0.jpg
) 32px -1px no-repeatline-height:21px}#m_comment div.item a:visited{color:#176A8Dtext-decoration:none}#m_comment div.item a.cnt{color:#176A8Dfont-size:12pxtext-decoration:nonefont-weight:normaltext-align:leftpadding-left:0pxbackground:url() top left no-repeat}#m_comment div.item a.cnt:visited{color:#176A8Dtext-decoration:nonefont-weight:normaltext-align:center}#m_comment div.item a.cnt:hover{color:#176A8Dtext-decoration:underlinetext-align:left}#m_comment div.line{display:none}#m_albumlist div.note{color:#176A8Dfont-size:14px}#m_albumlist div.desc{margin-bottom:12pxpadding:3px 10px 3px 10pxline-height:22pxbackground-color:#F2F2F2font-size:14px}#m_albumlist div.none{padding:100px 0 100px 0color:#176A8Dfont-size:14px}#m_albumlist div.line{margin-top:10pxline-height:16pxborder-top:1px solid #76B7D3}#m_albumlist div.tit{margin:6px 0 7px 0color:#176A8Dfont-size:14px}#m_albumlist div.tit a{color:#176A8Dfont-size:14px}#m_albumlist div.tit a:visited{color:#176A8D}#m_albumlist span.count{color:#176A8Dfont-size:12pxfont-weight:bold}#m_albumlist span.size{color:#999999font-size:12pxfont-family:Arial}#m_albumlist a.act{color:#176A8Dfont-size:12px}#m_albumlist a.act:visited{color:#176A8D}#m_albumlist a.page{color:#330000font-size:14px}#m_albumlist a.page:visited{color:#330000}#m_albumlist td.image{padding:5pxborder:1px solid #999999background:#0E5990}#m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px}#m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px}#m_friend div.user{margin-top:4pxcolor:#176A8Dfont-size:12px}#m_friend div.user a{color:#176A8Dfont-size:12px}#m_friend div.user a:visited{color:#176A8D}#m_friend div.line{margin-top:10pxline-height:16pxborder-top:1px solid #76B7D3}#m_setting a{color:#176A8D}#m_setting a:visited{color:#176A8D}#m_setting{line-height:22pxcolor:#176A8Dfont-size:14px}#m_setting img.sel{border:4px solid #FFDB7B}#m_setting img.unsel{border:1px solid #D2D2D2}#m_setting span.tit{font-size:14px}#m_setting span.usr{color:#176A8D}#m_setting div.sel{padding-top:6pxfont-size:14pxfont-weight:bold}#m_setting div.line{margin-top:20pxline-height:16pxborder-top:1px solid #76B7D3}#m_sysinfo a{color:#176A8D}#m_sysinfo a:visited{color:#176A8D}#m_sysinfo{line-height:22pxcolor:#176A8Dfont-size:14px}#m_sysinfo span.new{color:#FF0000font-size:10pxfont-family:Arial}#m_sysinfo span.date{color:#176A8Dfont-size:14px}#m_setbase{color:#176A8Dfont-size:14px}#m_setbase td{color:#176A8Dfont-size:14px}#m_setbase div.line{margin-top:5pxline-height:8pxborder-top:1px solid #76B7D3}{all rights reserved,http://www.yaaa.com.cn,http://hi.baidu.com/yaaa}#in_comment div.tit{margin-bottom:12pxcolor:#176A8Dfont-size:14pxfont-weight:bold}#in_comment div.user{margin-bottom:6pxcolor:#176A8Dfont-size:12px}#in_comment div.user a{color:#176A8Dfont-size:12px}#in_comment div.user a:visited{color:#176A8D}#in_comment div.user span.date{color:#176A8Dfont-size:12px}#in_comment div.desc{color:#176A8Dfont-size:12px}#in_comment div.line{margin-top:17pxline-height:17pxborder-top:1px solid #76B7D3}#in_send div.tit{margin:10px 0 10px 0color:#176A8Dfont-size:14pxfont-weight:bold}
用CSS往图片上嵌入文字有二种方法，分别如下：第一种方法、添加一个DIV，采用绝对定位，图片所属DIV为基准。
参考代码如下：
1
2
3
4
5
6
<div style="position:relativewidth:100pxheight:100px">
<img src="" alt="" />
<div style="position:absolutewidth:100pxheight:100pxz-indent:2left:0top:0">
文字
</div>
</div>
第二种方法、图片作为背景图片。
参考代码如下：
1
2
3
<div style="background:url(abc.jpg) no-repeat left top">
文字
</div>
