使用简单的 CSS 技巧，让 WordPress 内图片显示

部落格已经风行多年，笔者使用过奇摩的部落格、Blogger、痞客邦，到最后选择 wordpress ，刚开始使用NAS架设，频宽与管理问题接踵而来，最后租用虚拟主机架设WordPress，然而文章中的图片可以让网站更多采多姿，提升访客阅读效果，以达增加网站的流量。因此许多网站会在图片上的外框动些手脚，让图文并茂的阅读介面更清爽舒适，当然这类外挂程式不少，不过此文使用简单的 CSS 技巧，让图片更活泼有趣。

图片边框是最常使用的效果之一，方法很简单，就是先透过文字编辑器开启布景主题的式样档（style.css）填入CSS语法，较新的布景主题都有支援自订CSS的方式，下图是笔者使用的布景主题来选择自订的「附加CSS」功能。

进入编辑CSS的画面，输入红色框内的文字，「.it-shadow-03」是一个新的类别定义，「.」字元后面是类别名称，儘量输入好记得用词。「border-radius: 6px」是圆角的弧度指定，数值越大弧度越大，笔者使用6px。「border: 1px solid #ddd」是边框粗细与线条样式，边框线条笔者指定ipx，数值越大当然越粗；而soid 表示实体线（dotted 则会变虚线）；#ddd 则是线的颜色代码（可参考这里）。

在编辑区上点选图片出现图示选单，选择红色框内的编辑图示。

接着我们为图片的 CSS 类别设定一个定义过的类别名称，如笔者之前设定的 it-shadow-03，记住要点选〔更新〕才能生效喔！

回到网页浏览随即看到刚刚指定的图片出现了边框与圆角的效果。

其实让不懂CSS程式码的朋友也可以享受网页设计的乐趣，网路这幺发达的今天，资源相当丰富，这里介绍 一个相当棒的线上式样产生器网站 CSSmatic ，例如进入网页选「Box Shadow」来产生阴影效果。

网站左边是调整的项目，只要利用滑鼠移动，右侧马上就可以预览效果，且CSS语法也随即产生。

将CSS的语法複製下来。

进入编辑CSS的画面，并定义一个类别名称（如it-shadow-01），并将语法贴上如下图红色框所示。

一样在编辑区上点选图片选择编辑图示后， CSS 类别设定之前定义的it-shadow-01类别名称，点选〔更新〕即完成。

下图显示有设定过it-shadow-01类别名称的图片呈现阴影，没有设定的图片遇到图片是白色底时，与文字间容易产生阅读的干扰。不懂CSS语法不用担心，利用样式产生器网站 CSSmatic 让你轻鬆製作图片阴影的效果。