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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta http-equiv="Content-Language" content="zh-CN" /title/titlestyle type="text/css" body {background:#2e334d;}img {border:none;}a.pic-shadow {display:inline-block;zoom:1;padding:1px;backgroun...<a href="http://www.tulaoshi.com/n/20160220/1631254.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-20</span> <i>标签:</i> <div class="yyy_2_a"><a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> </div> </div> </div> </div> <div class="xiangguan_gg xiangguan_reader clearfix"> <div class="xiang_892_1" style="width:1158px;"> <h3><a href="http://www.tulaoshi.com/n/20160220/1631254.html" target="_blank">CSS实例:通过定义渐变边框给图片加阴影</a>的相关文章</h3> </div> <div class="xiang_892_2" style="width:1158px;"> <ul id="loadmore_container" style="width:1158px;"> <li> <div class="xiang_892_2_1"><a href="/reader/1615205" target="_blank"><img src="http://img.tulaoshi.com/201602/19/b23aefcc16a5d0545d09a160319ec2a4_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1615205.html" target="_blank">使用CSS给图片添加阴影之入门篇</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？我们可以采取“视觉欺骗大法”——定义渐变边框来实现： !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" / meta http-eq...<a href="http://www.tulaoshi.com/n/20160219/1615205.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/印槐忘/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/5.jpg" /><span>印槐忘</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">23</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630899" target="_blank"><img src="http://img.tulaoshi.com/201602/19/8bcae6a69dd1def0b3ef7b24d125a5cb_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630899.html" target="_blank">CSS教程(5)：通过实例学习CSS背景</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 本CSS教程介绍：1.如何使用像素来定位背景图像，2.如何设置固定的背景图像，3.所有背景属性在一个声明之中。参考网页教学网关于CSS背景的理论知识：。 1、如何使用像素来定位背景图像本例演示如何使用像素来在页面上定位背景图像。 html head style type="text/css" body { background-image: url('/i/eg_bg_03.gif'); background-repeat: no-repeat; background-attachment:fixed; backgr...<a href="http://www.tulaoshi.com/n/20160219/1630899.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/常见铭越萱/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/9.jpg" /><span>常见铭越萱</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630726" target="_blank"><img src="http://img.tulaoshi.com/201602/19/c5ed82f192eb15612165c6503b739f30_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630726.html" target="_blank">通过CSS实例实现清除浮动</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子： HTML4STRICT代码：div style="width:200px;border:1px solid red;" div style="float:left;width:80px;height:80px;border:1px solid blue;"TEST DIV/div &nb...<a href="http://www.tulaoshi.com/n/20160219/1630726.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/滋HWB935dgj/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/16.jpg" /><span>滋HWB935dgj</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630941" target="_blank"><img src="http://img.tulaoshi.com/201602/19/3a37f75a36f2a482eb08c2c359ecf5f2_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630941.html" target="_blank">CSS教程:通过实例学习CSS布局网页</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 通过上一章的学习，读者了解到了CSS强大的表现控制功能，特别是在布局方面有很大的优势。相对于代码条理混乱、样式杂糅在结构中的表格布局，CSS将带来全新的布局方法，让网页设计师更轻松、更自由。本章通过多个示例展示CSS布局网页的方法，并对CSS的盒模型作详细阐述。相信读者在深入理解盒模型后，布局网页、定位CSS网页元素将更加自如。上一章学习了Web标准的概念以及XHTML和CSS的基本知识。XHTM...<a href="http://www.tulaoshi.com/n/20160219/1630941.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/装纯是给谁/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/21.jpg" /><span>装纯是给谁</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630917" target="_blank"><img src="http://img.tulaoshi.com/201602/19/037a1f8e506c13954421078a3e68dd9e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630917.html" target="_blank">CSS教程(2)：通过实例学习CSS背景</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 本教程一共三个例子：1、设置背景颜色;2、设置文本的背景颜色;3、将图像设置为背景。参考网页教学网关于CSS背景的理论知识：CSS教程(1)：学习CSS背景相关知识 1、设置背景颜色本例演示如何为元素设置背景颜色。 html head style type="text/css" body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255...<a href="http://www.tulaoshi.com/n/20160219/1630917.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/遭殃煽叵/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/27.jpg" /><span>遭殃煽叵</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630892" target="_blank"><img src="http://img.tulaoshi.com/201602/19/3394a7ae4da4023a1107b219234c1d25_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630892.html" target="_blank">CSS教程(4)：通过实例学习CSS背景</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 本教程介绍：1.如何仅显示一次背景图像，2.如何放置背景图像，3.如何使用%来定位背景图像。参考网页教学网关于CSS背景的理论知识：。 1、如何仅显示一次背景图像本例演示如何仅显示一次背景图像。 html head style type="text/css" body { background-image: url('/i/eg_bg_03.gif'); background-repeat: no-repeat } /style /head body /body /html 2、如何放置背景图像本例演示如何在页面...<a href="http://www.tulaoshi.com/n/20160219/1630892.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/qdwz5/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/2.jpg" /><span>qdwz5</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630887" target="_blank"><img src="http://img.tulaoshi.com/201602/19/b11295845592cb717b43fb68fa297295_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630887.html" target="_blank">CSS教程(3)：通过实例学习CSS背景</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 本教程一共三个例子：1、如何重复背景图像;2、如何在垂直方向重复背景图像;3、如何在水平方向重复背景图像。参考网页教学网关于CSS背景的理论知识：。 1、如何重复背景图像本例演示如何重复背景图像。 html head style type="text/css" body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat } /style /head body /body /html 2、如何在垂直方向重复背景图像本例演...<a href="http://www.tulaoshi.com/n/20160219/1630887.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/内幕帝/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/27.jpg" /><span>内幕帝</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1606579" target="_blank"><img src="http://img.tulaoshi.com/201602/19/9cfb304affd7349e630c8bfea2aecbf8_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1606579.html" target="_blank">CSS定义标题的实例讲解</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">简单的样式使用CSS，最容易做的事情就是给我们的标题设置不同的字体样式。我们可以建立一个CSS规则，它将把样式应用到页面中出现的所有h1标签（或者是整个站点，当使用一个外部样式表的时候）。随后，如果我们想要改变整个站点上所有出现h1标签的地方的颜色、尺寸、字体的话，我们所有需要做的事情就是修改一些CSS规则，然后它们将立即改变。听上去非常诱惑人，不是吗？让我们认识一下我们自己的超级酷的标...<a href="http://www.tulaoshi.com/n/20160219/1606579.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/4444tbbbbb/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/19.jpg" /><span>4444tbbbbb</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1565073" target="_blank"><img src="http://img.tulaoshi.com/201602/15/bcaea4e0f2bdf80c920747fd7d2beaaf_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160215/1565073.html" target="_blank">Photoshop通过字体实例解析内阴影功能</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/ps/" target="_blank">PS</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a></div> <div class="span_em_123"> PS的图层样式一直都是大家添加特效的有力武器，比如投影、描边什么的，他们不会破坏图层原本的信息，真是非常好用。有了正确的知识和一定的经验以后，几乎可以完成任何特效，为了实现这些效果，你需要了解每个功能都是干什么的，其中一些设置是怎么控制特效的变化的。希望看完了这一系列的教程，你能解开封印，做出更棒的作品。内阴影的应用一般的，内阴影是在2D图像上模拟3D效果的时候使用，通过制造...<a href="http://www.tulaoshi.com/n/20160215/1565073.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/杀夫夺妻7384/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/3.jpg" /><span>杀夫夺妻7384</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1608884" target="_blank"><img src="http://img.tulaoshi.com/201602/19/385de2f0cd29ba2be5743f19eafc2bd1_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1608884.html" target="_blank">WPS文字如何给页面加边框</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/diannaorumen/" target="_blank">电脑入门</a></div> <div class="span_em_123"> 页面边框是什么?页面边框就是在一个页面上添加上一些边框让文档更加的醒目和好看。页面边框主要用于在WPS文档中设置页面周围的边框，可以设置普通的线型页面边框和各种图标样式的艺术型页面边框，从而使Word文档更富有表现力。那么WPS文字如何为页面添加边框呢?很简单，在你想加边框的页，全选这页的内容，点击格式--边框和底纹--页面边框--设置方框，颜色、线型、粗细选择你需要的，确定，就ok了。操作步...<a href="http://www.tulaoshi.com/n/20160219/1608884.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/知然9578/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/14.jpg" /><span>知然9578</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629954" target="_blank"><img src="http://img.tulaoshi.com/201602/19/7fd20c0562ec6ac3d366542ce4388fcc_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1629954.html" target="_blank">CSS设计网页边框的几个实例</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 掌握CSS网页布局技术，网页边框效果的定义是基础内容，其中也涉及到CSS盒模型知识以及CSS属性简写知识。相关文章阅读：CSS设计网页时的一些常用规范实例一： CSS： p {padding: 15px; border: 1px solid black; } h5{padding: 0px; border: 1px solid red;} XHTML： pThis is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left./p h5This header ha...<a href="http://www.tulaoshi.com/n/20160219/1629954.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/ukiuykjhk/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>ukiuykjhk</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">12</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1599173" target="_blank"><img src="http://img.tulaoshi.com/201602/19/5ea58b7dbe16dd6fdf33eb17cd5e5529_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1599173.html" target="_blank">CSS教程:通过实例学习和理解CSS盒模型</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 网页制作WEB文章简介：盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒（box）中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层div。盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin...<a href="http://www.tulaoshi.com/n/20160219/1599173.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/3曼妙旖旎3/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" /><span>3曼妙旖旎3</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">6</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630573" target="_blank"><img src="http://img.tulaoshi.com/201602/19/d02ebf02ad012b383ff3d9c142826625_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630573.html" target="_blank">CSS3教程(4):网页边框和网页文字阴影</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。上一篇介绍了：CSS3教程(3):border-color网页边框色彩一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 #XXX = 像通常一样的颜色了解了这些，我们...<a href="http://www.tulaoshi.com/n/20160219/1630573.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/血祭红罂粟/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/13.jpg" /><span>血祭红罂粟</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1571430" target="_blank"><img src="http://img.tulaoshi.com/201602/16/b45f4e5d634d217db7bc42f16ce19fc7_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160216/1571430.html" target="_blank">Illustrator通过实例讲解文字渐变的绘制技巧</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/illustrator/" target="_blank">Illustrator</a> <a href="http://www.tulaoshi.com/coreldraw/" target="_blank">CorelDRAW</a></div> <div class="span_em_123"> <a href="http://www.tulaoshi.com/n/20160216/1571430.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/KissYou嘻嘻/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>KissYou嘻嘻</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1610017" target="_blank"><img src="http://img.tulaoshi.com/201602/19/64660454a2522f34b450c3d92f3b3f83_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1610017.html" target="_blank">能够通过w3验证的css文字阴影效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> CSS2中的text-shadow属性能够很容易的给web页面中的文本添加阴影，但是到目前为止只有OS X的Safari浏览器支持它，今天，我们将为其他浏览器创建CSS文本阴影效果，包括Firefox，并且能够通过w3验证。讨论了多年的text-shadow属性可以让你控制页面元素阴影的颜色、偏移量及模糊度，尽管其还未被广泛支持，但是某些设计师已经开始决定在任意地方使用CSS text-shadows属性了。尽管这只是为很少数量的用户增强...<a href="http://www.tulaoshi.com/n/20160219/1610017.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/fly爱你的阳阳/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/7.jpg" /><span>fly爱你的阳阳</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1511299" target="_blank"><img src="http://img.tulaoshi.com/201601/29/198275f06ec9ae2be046cfce84a38784_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160129/1511299.html" target="_blank">Photoshop教程：用滤镜加边框丰富你的图片</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/ps/" target="_blank">PS</a> <a href="http://www.tulaoshi.com/psjiaocheng/" target="_blank">PS教程</a></div> <div class="span_em_123"> 注：本教程旨在大家制作照片边框，所以也没有过多时间去选素材，这张照片有点偏色，大家就凑合着看吧，反正不影响你的教程学习。。 :) 多多包涵啊！ 1、首先打开需要编辑的图片，用矩形选取工具，选择需要加工的部分，如图： 2、用Ctrl+Shift+I反选选区，然后按“Q”键（启用快速蒙版的一个热键），如图： 3、现在不要乱动，依次选择“滤镜”—“扭曲”—“波纹”，参数以及效果如图： ...<a href="http://www.tulaoshi.com/n/20160129/1511299.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/恒利小伙/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/19.jpg" /><span>恒利小伙</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">16</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1626375" target="_blank"><img src="http://img.tulaoshi.com/201602/19/637b70c34179e8bf5706e5daed2c7b4a_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1626375.html" target="_blank">通过重定义CSS实现网页内容完美打印输出</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 虽说已是互联网无所不能的时代，但还是会需要将网页内容打印出来阅读。对于网生的电子报、电子期刊这些更适合于在网络环境中阅读的内容，怎样通过打印输出生成适当的纸媒页面呢？长时间来，这一直是一个课题。为了写如下这篇博文，作者对相关问题进行了深入思考，并为Bits O' NewMedia网站编写了适于打印输出的样式表，现将相关经验分享给大家。设定适于打印输出的样式表这并不象想象中...<a href="http://www.tulaoshi.com/n/20160219/1626375.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/问情至婷/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/15.jpg" /><span>问情至婷</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">18</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1608582" target="_blank"><img src="http://img.tulaoshi.com/201602/19/85fc64c64f648e3c0e92917685f2f1c9_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1608582.html" target="_blank">word2007加边框</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/diannaorumen/" target="_blank">电脑入门</a></div> <div class="span_em_123"> 不会用PS的朋友有福了，经常处理照片和一些图片需要用到PS软件来修改，比如许多热爱自拍的朋友们都喜欢将自己的照片整整，然后加个相框。但是 PS软件操作起来比较麻烦，如果不太专业的话可能无法完成自己想要的效果哟!没事，会Word就可以了，以前我们也提到过用PS代替Word给图片加字，今天Word联盟教大家利用Word2007来制作精美的心形相册边框，效果非常好，也很适合一些MM们的口味!先看看下面的效果图吧! ...<a href="http://www.tulaoshi.com/n/20160219/1608582.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/taizi2228/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/12.jpg" /><span>taizi2228</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630030" target="_blank"><img src="http://img.tulaoshi.com/201602/19/eaeb396d50fb3cc9975cacd2fbd5f9de_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630030.html" target="_blank">CSS高级技巧:阴影效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 上一篇 CSS教程文章：CSS高级技巧:网页布局 CSS阴影效果 (Drop Shadows) 一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们都是直接用PhotoShop直接制作带阴影的图片以供使用, 这里介绍的是一种不需要修改图片, 而只需要用CSS完成的技巧. 原理: 给img /标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把img /利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果. &nb...<a href="http://www.tulaoshi.com/n/20160219/1630030.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/桐桐儿妈咪/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/10.jpg" /><span>桐桐儿妈咪</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1592092" target="_blank"><img src="http://img.tulaoshi.com/201602/19/665fa9a7def50355c99cf4135c04611a_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1592092.html" target="_blank">PHP正则匹配图片并给图片加链接详解</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">正则: 代码如下： $newstext=preg_replace(preg_replace('/(img[^]+src\s*=\s*”?([^"\s]+)”?[^]*)/im', ‘a href=”$2″$1/a', $newstext); 解说：１.preg_replace和str_replace的区别： str_replace只是纯字符替换，而preg_replace才是正则替换２.$0,$1,$2等的说明： $0指的是被整个模式所匹配的文本； $1指的是首个 ( ) 引用的串; $2指的是第二个()引用的串；以此类推。<a href="http://www.tulaoshi.com/n/20160219/1592092.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/兎儿爷free/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>兎儿爷free</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">33</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> </ul> <div id="pages" class="clearfix"> <a href="/reader/21280.html">上一页</a><a href="/reader/21277.html">21277</a><a href="/reader/21278.html">21278</a><a href="/reader/21279.html">21279</a><a href="/reader/21280.html">21280</a><a href="/reader/21281.html" class="cur">21281</a><a href="/reader/21282.html">21282</a><a href="/reader/21283.html">21283</a><a href="/reader/21284.html">21284</a><a href="/reader/21285.html">21285</a><a href="/reader/21282.html">下一页</a> </div> </div> </div>  <script type="text/javascript">tls.output.show_foot();</script> <div class="float_bottom" id="fixbottom" style="bottom:30px;"> <a href="http://m.tulaoshi.com//" class="icon_hu3">手机页面</a> <div class="float_bot_2"> <a href="javascript:;"id="show_search_input"> <input type="submit" class="input_sub" id="fixbottom_search_btn"> <input type="text" class="text_a_input" placeholder="输入你想搜索的关键词" style="display:none;" id="fixbottom_search_input"> </a> </div> <a href="javascript:;" class="icon_hu2" id="fav_site_btn" data-url="http://www.tulaoshi.com//">收藏网站</a> <a href="javascript:;" class="icon_hu" id="totop">回到头部</a> </div>  <script type="text/javascript" src="http://static.tulaoshi.com/js/zt.js"></script> </body> </html>