• 最近一段好忙, 忙的都没时间去管理网站,网站被举报 被攻击 我也是醉了 :sad:

  • 好久没发说说了,感觉与世隔绝了 :lol:

  • 今天更换Git主题,以后本站由Git主题强力驱动 :mrgreen: :mrgreen:
  • 六一儿童节快乐

  • 今天全站启用又拍云 CDN进行加速

  • 这两天有些忙所以没来得及更新,愿一切安好
  • 锲而不舍是取得成功关键的一环
  • 当你无助时,你可以哭,但哭过你必须要振作起来,绝地逢生并不罕见,何况不是绝境! 早安!

  • 今天五一,没有出去玩,主要是人太多了

  • 今天外面风好大,天气也有点冷,出门一定要多穿衣服!

WP美化文章内页彩色渐变框代码

wp优化 慕白 3个月前 (05-01) 1026次浏览 已收录 1个评论
文章目录[隐藏]

样式预览直通车

教程正文开始

首先把下面的CSS丢到你的主题style.css样式文件内。圆角值修改下边的第三行即可。默认8px
/*WP超级漂亮美化框 by:清宁时光 www.aimubai.com.cn*/
#zm_mhz , #zm_xgh , #zm_tkzj , #zm_xyz , #zm_gll , #zm_xty , #zm_yyz , #zm_szh , #zm_wbk {
    /*圆角值,在此定义*/
    border-radius : 8px ;
}
/*迷幻紫*/
#zm_mhz {
    color : #555555 ;
    overflow : hidden ;
    margin : 10px 0 ;
    padding : 15px 15px 15px 35px ;
    /*border-radius: 10px;*/
    box-shadow : 6px 0 12px -5px rgb ( 190 , 196 , 252 ) , -6px 0 12px -5px rgb ( 189 , 196 , 252 ) ;
    background-color : #8EC5FC ;
    background-image : linear-gradient ( 62deg , #8EC5FC 0% , #E0C3FC 100% ) ;
    background-image : -webkit-linear-gradient ( 62deg , #8EC5FC 0% , #E0C3FC 100% ) ;
}
/*西瓜红*/
#zm_xgh {
        color : #555555 ;
    overflow : hidden ;
    margin : 10px 0 ;
    padding : 15px 15px 15px 35px ;
    /*border-radius: 10px;*/
    box-shadow : 6px 0 12px -5px rgb ( 255 , 176 , 172 ) , -6px 0 12px -5px rgb ( 255 , 161 , 174 ) ;
    background-color : #ff9a8b66 ;
    background-image : linear-gradient ( 220deg , #FF9A8B 0% , #ff6a8838 55% , #FF99AC 100% ) ;
    background-image : -webkit-linear-gradient ( 220deg , #ff9a8b7a 0% , #ff6a88ab 55% , #ff99ac82 100% ) ;
}
/*华为P30 天空之境*/
#zm_tkzj {
    color : #555555 ;
    overflow : hidden ;
    margin : 10px 0 ;
    padding : 15px 15px 15px 35px ;
    /*border-radius: 10px;*/
    box-shadow : 6px 0 12px -5px rgb ( 253 , 223 , 234 ) , -6px 0 12px -5px rgb ( 215 , 240 , 243 ) ;
    background-color : #FFDEE9 ;
    background-image : linear-gradient ( 0deg , #ffdee9c4 0% , #b5fffc8f 100% ) ;
    background-image : -webkit-linear-gradient ( 0deg , #ffdee9c4 0% , #b5fffc8f 100% ) ;
}
/*小宇宙*/
#zm_xyz {
    color : #eeeeee ;
    overflow : hidden ;
    margin : 10px 0 ;
    padding : 15px 15px 15px 35px ;
    /*border-radius: 10px;*/
    box-shadow : 6px 0 12px -5px rgb ( 12 , 85 , 141 ) , -6px 0 12px -5px rgba ( 10 , 58 , 93 , 0 ) ;
    background-image : radial-gradient ( circle 263px at 100.2% 3% , rgba ( 12 , 85 , 141 , 1 ) 31.1% , rgba ( 205 , 181 , 93 , 1 ) 36.4% , rgba ( 244 , 102 , 90 , 1 ) 50.9% , rgba ( 199 , 206 , 187 , 1 ) 60.7% , rgba ( 249 , 140 , 69 , 1 ) 72.5% , rgba ( 12 , 73 , 116 , 1 ) 72.6% ) ;
}
/*橄榄绿*/
#zm_gll {
    color : #eeeeee ;
    overflow : hidden ;
    margin : 10px 0 ;
    padding : 15px 15px 15px 35px ;
    /*border-radius: 10px;*/
    box-shadow : 6px 0 12px -5px rgb ( 68 , 110 , 92 ) , -6px 0 12px -5px rgb ( 204 , 212 , 163 ) ;
    background-image : linear-gradient ( 102deg , rgba ( 68 , 110 , 92 , 1 ) 17.4% , rgba ( 107 , 156 , 120 , 1 ) 49.3% , rgba ( 154 , 183 , 130 , 1 ) 83.4% , rgba ( 247 , 237 , 191 , 1 ) 110.3% ) ;
}
/*小太阳*/
#zm_xty {
    color : #ffffff ;
    overflow : hidden ;
    margin : 10px 0 ;
    padding : 15px 15px 15px 35px ;
      /*border-radius: 10px; */
    box-shadow : 6px 0 12px -5px rgb ( 253 , 223 , 234 ) , -6px 0 12px -5px rgb ( 215 , 240 , 243 ) ;
    background-image : radial-gradient ( circle farthest-corner at -8.9% 51.2% , rgba ( 255 , 124 , 0 , 1 ) 0% , rgba ( 255 , 124 , 0 , 1 ) 15.9% , rgba ( 255 , 163 , 77 , 1 ) 15.9% , rgba ( 255 , 163 , 77 , 1 ) 24.4% , rgba ( 19 , 30 , 37 , 1 ) 24.5% , rgba ( 19 , 30 , 37 , 1 ) 66% ) ;
}
/*优雅紫*/
#zm_yyz {
    color : #ffffff ;
    overflow : hidden ;
    margin : 10px 0 ;
    padding : 15px 15px 15px 35px ;
    /*border-radius: 10px;*/
    box-shadow : 6px 0 12px -5px rgb ( 175 , 160 , 208 ) , -6px 0 12px -5px rgba ( 177 , 161 , 207 , 0 ) ;
    background-image : radial-gradient ( circle farthest-corner at 10% 20% , rgba ( 95 , 117 , 227 , 1 ) 0% , rgba ( 188 , 167 , 205 , 1 ) 90% ) ;
}
/*深邃黑*/
#zm_szh {
    color : #c7c7c7 ;
    overflow : hidden ;
    margin : 10px 0 ;
    padding : 15px 15px 15px 35px ;
    /*border-radius: 5px;*/
    box-shadow : 6px 0 12px -5px rgb ( 155 , 170 , 185 ) , -6px 0 12px -5px rgba ( 177 , 161 , 207 , 0 ) ;
    background-image : radial-gradient ( circle farthest-corner at 10% 20% , rgba ( 0 , 0 , 0 , 1 ) 0% , rgba ( 64 , 64 , 64 , 1 ) 90.2% ) ;
}
/*无边框*/
#zm_wbk {
    color : #000000 ;
    overflow : hidden ;
    margin : 10px 0 ;
    padding : 15px 15px 15px 35px ;
}
#zm_xyz a , #zm_gll a {
      color : #eeeeee ;
}
#zm_szh a {
    color : #c7c7c7 ;
}
#zm_xty a , #zm_yyz a {
    color : #ffffff ;
}

然后把下面的代码放到你主题的函数文件functions.php内

/*添加文本编辑自定义快捷标签按钮 开始*/
 add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
 function bolo_after_wp_tiny_mce($mce_settings) {
 ?>
 <script type="text/javascript">
  QTags.addButton( 'z_mhz', '迷幻紫', '<div id="zm_mhz">', "</div>\n" );
 QTags.addButton( 'z_xgh', '西瓜红', '<div id="zm_xgh">', "</div>\n" );
 QTags.addButton( 'z_tkzj', '天空之境', '<div id="zm_tkzj">', "</div>\n" );
 QTags.addButton( 'z_xyz', '小宇宙', '<div id="zm_xyz">', "</div>\n" );
 QTags.addButton( 'z_gll', '橄榄绿', '<div id="zm_gll">', "</div>\n" );
 QTags.addButton( 'z_xty', '小太阳', '<div id="zm_xty">', "</div>\n" );
 QTags.addButton( 'z_yyz', '优雅紫', '<div id="zm_yyz">', "</div>\n" );
 QTags.addButton( 'z_szh', '深邃黑', '<div id="zm_szh">', "</div>\n" );
 QTags.addButton( 'z_wbk', '无边框', '<div id="zm_wbk">', "</div>\n" );
 function bolo_QTnextpage_arg1() {
 }
 </script>
  <?php
  }
  /*添加文本编辑自定义快捷标签按钮 结束*/

 

 


清宁时光 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WP美化文章内页彩色渐变框代码
喜欢 (1)
[6447834@qq.com]
分享 (0)
慕白
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 挺漂亮的,已成功安装
    浅笑心柔2021-05-19 07:34 回复