找到style.css文件里缩略图的class名 .thumbnail
- .thumbnail {
- position: relative;
- float: left;
- max-width: 200px;
- height: auto;
- clear: both;
- margin: 1px 20px 0 0;
- overflow: hidden;
- transition-duration: .5s;
- }
在{ }中间添加以下两行属性:
- //缩略图添加边框
- border:1px solid #ccc;
- padding:4px;
添加后完整代码如下:
- .thumbnail {
- position: relative;
- float: left;
- max-width: 200px;
- height: auto;
- clear: both;
- margin: 1px 20px 0 0;
- border:1px solid #ccc;
- padding:4px;
- overflow: hidden;
- transition-duration: .5s;
- }
自用的代码:
[reply]
- .thumbnail {
- position: relative;
- float: left;
- max-width: 200px;
- height: auto;
- clear: both;
- margin: 1px 20px 0 0;
- overflow: hidden;
- transition-duration: .5s;
- border-radius: 8px;
- -webkit-box-shadow: rgba(0,0,0,0.496094) 3px 3px 3px;
- }
如果出现手机端不兼容的情况请用下面代码试试(最简单直接建议使用):
- /*缩略图添加圆角和背影特效*/
- .thumbnail {
- border-radius: 6px;
- box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
- }
[/reply]
效果如下:
首页幻灯片圆角
- #slider img {
- border-radius: 8px;
- }
备注缩略图阴影圆角效果要单独添加,上图样式可自行调整删减。