教程：教程：为你的图片添加漂亮的边框

发布者： alain01 在 2013/7/9 22:20:00 8110 次阅读
夏天到了，是时候在你的网站上发布假期图片新闻了...
在这里找到一个新的教程，让你的设计更现代，更专业。
希望你会喜欢...

实际上，我们会在你的图片周围添加一个白色边框，并带有阴影效果。

调整大小后的图像看这里的结果！ ======> 之后！调整大小后的图像



























好的，让我们来这个教程吧。


1) 在 css 文件中添加新样式

打开并编辑你的主题中的 style.css 文件，
位于 /themes/my_theme/css 或 /themes/my_theme
并在末尾添加以下代码

img.img-frame { 
/* 照片阴影颜色 */ 
    box-shadow: 5px 5px 20px #404040;  
/* 效果：干旧风格边框，用于黑白老照片样式*/ 
/*    border-color: #f5eac7; */ 
    border-color: #ffffff; 
    border-style: solid; 
    border-width: 20px; 
    display: block; 
    margin-l; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 
    margin-bottom: 10px; 
}


然后保存并上传到您的网站上。
您已经完成了本教程中最困难的工作。耶！！！


2) 删除浏览器缓存

仅首次执行。


3) 使用这个新的类和图片

3a) 基本编辑器（文本区）
参见3b)

3b) XOOPS 编辑器（DHTML文本区）
在bbcode中不可用。我们无法在bbcode中添加类。
如果您自定义区块；选择内容类型："HTML"。
然后像这样插入您图片


3c) TinyMCE (v3)
- 点击“插入图片”按钮，
- 在“URL”、“描述”和“标题”字段中输入内容，
- 点击“外观”选项卡，并在“class”字段的下拉列表中选择“img-frame”，然后确定


这么简单，不是吗？
不要犹豫自己试试！！！

要进一步工作

- 通过“旧黄色”改变边框颜色（这里为白色），用于黑白老照片风格，
- 改变阴影颜色，
- 改变阴影方向，
- 改变阴影宽度，
- 最后，我们还可以添加动态效果（例如悬停时的缩放），但请注意不要过于花哨...

如果您喜欢我们的教程，请告诉我们。

附言 : Kris在frxoops.org表示，我们可以使用现有的xoops.css类
例如“pad10 boxshadow”，但效果不同，但使用非常简单，无需更改CSS样式。