wordpress丨更知鸟Begin主题美化之缩略图添加圆角边框

2018年5月17日16:10:42 发表评论 602 人围观
 wordpress丨更知鸟Begin主题美化之缩略图添加圆角边框
PS:更知鸟自带主题的缩略图,很规矩的方形,看到别人的主题都是圆角的,还有立体感,甚是喜欢

食用方法:

1.找到style.css文件里缩略图的class名 .thumbnail

  1. /** 缩略图 **/
  2. .thumbnail {
  3.     position: relative;
  4.     float: left;
  5.     max-width: 200px;
  6.     height: auto;
  7.     clear: both;
  8.     margin: 1px 20px 0 0;
  9.     overflow: hidden;
  10.     transition-duration: .5s;
  11. }

2.在{ }中间添加以下两行属性:

  1. //缩略图添加边框
  2. border:1px solid #ccc;
  3. padding:4px;

完整代码:

  1. /** 缩略图 **/
  2. .thumbnail {
  3.  position: relative;
  4. float: left;
  5.     max-width: 200px;
  6.     height: auto;
  7.     clear: both;
  8.     margin: 1px 20px 0 0;
  9.     overflow: hidden;
  10.     transition-duration: .5s;
  11.     border-radius: 8px;
  12.     -webkit-box-shadow: rgba(0,0,0,0.496094) 3px 3px 3px;
  13. }

 

来看看效果吧wordpress丨更知鸟Begin主题美化之缩略图添加圆角边框更多精彩请进入分类专题 建站经验

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: