子比主题美化 – WordPress在文章页添加彩色渐变框

0261

首先把下面的CSS丢到你的主题style.css样式文件内

/*WordPress文章页面新增<a href="https://www.yjjmt.com/14779.html" title="【查看含有[彩色渐变]标签的文章】" target="_blank">彩色渐变</a>框*/
#smcos_mhz,#smcos_xgh,#smcos_tkzj,#smcos_xyz,#smcos_gll ,#smcos_xty,#smcos_yyz,#smcos_szh,#smcos_wbk{
/*圆角值,在此定义*/
border-radius: 8px;
}
/*样式-迷幻紫*/
#smcos_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%);
}
/*样式-西瓜红*/
#smcos_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%);
}
/*样式-天空之境*/
#smcos_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%);
}
/*样式-小宇宙*/
#smcos_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% );
}
/*样式-橄榄绿*/
#smcos_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% );
}
/*样式-小太阳*/
#smcos_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% );
}
/*样式-优雅紫*/
#smcos_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% );
}
/*样式-深邃黑*/
#smcos_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% );
}
/*样式-无边框*/
#smcos_wbk {
color: #000000;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
#smcos_xyz a , #smcos_gll a{
color: #eeeeee;
}
#smcos_szh a{
color: #c7c7c7;
}
#smcos_xty a, #smcos_yyz a{
color: #ffffff;
}
/*WordPress文章页面新增<a href="https://www.yjjmt.com/14779.html" title="【查看含有[彩色渐变]标签的文章】" target="_blank">彩色渐变</a>框*/

#smcos_mhz,#smcos_xgh,#smcos_tkzj,#smcos_xyz,#smcos_gll ,#smcos_xty,#smcos_yyz,#smcos_szh,#smcos_wbk{

/*圆角值,在此定义*/

border-radius: 8px;

}

/*样式-迷幻紫*/

#smcos_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%);

}

/*样式-西瓜红*/

#smcos_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%);

}

/*样式-天空之境*/

#smcos_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%);

}

/*样式-小宇宙*/

#smcos_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% );

}

/*样式-橄榄绿*/

#smcos_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% );

}

/*样式-小太阳*/

#smcos_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% );

}

/*样式-优雅紫*/

#smcos_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% );

}

/*样式-深邃黑*/

#smcos_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% );

}

/*样式-无边框*/

#smcos_wbk {

color: #000000;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

}

#smcos_xyz a , #smcos_gll a{

color: #eeeeee;

}

#smcos_szh a{

color: #c7c7c7;

}

#smcos_xty a, #smcos_yyz a{

color: #ffffff;

}
/*WordPress文章页面新增<a href="https://www.yjjmt.com/14779.html" title="【查看含有[彩色渐变]标签的文章】" target="_blank">彩色渐变</a>框*/

#smcos_mhz,#smcos_xgh,#smcos_tkzj,#smcos_xyz,#smcos_gll ,#smcos_xty,#smcos_yyz,#smcos_szh,#smcos_wbk{

/*圆角值,在此定义*/

border-radius: 8px;

}

/*样式-迷幻紫*/

#smcos_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%);

}

/*样式-西瓜红*/

#smcos_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%);

}

/*样式-天空之境*/

#smcos_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%);

}

/*样式-小宇宙*/

#smcos_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% );

}

/*样式-橄榄绿*/

#smcos_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% );

}

/*样式-小太阳*/

#smcos_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% );

}

/*样式-优雅紫*/

#smcos_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% );

}

/*样式-深邃黑*/

#smcos_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% );

}

/*样式-无边框*/

#smcos_wbk {

color: #000000;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

}

#smcos_xyz a , #smcos_gll a{

color: #eeeeee;

}

#smcos_szh a{

color: #c7c7c7;

}

#smcos_xty a, #smcos_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="smcos_mhz">迷幻紫</div>', "" );
 QTags.addButton( 'z_xgh', '西瓜红', '<div id="smcos_xgh">西瓜红</div>', "" );
 QTags.addButton( 'z_tkzj', '天空之境', '<div id="smcos_tkzj">天空之境</div>', "" );
 QTags.addButton( 'z_xyz', '小宇宙', '<div id="smcos_xyz">小宇宙</div>', "" );
 QTags.addButton( 'z_gll', '橄榄绿', '<div id="smcos_gll">橄榄绿</div>', "" );
 QTags.addButton( 'z_xty', '小太阳', '<div id="smcos_xty">小太阳</div>', "" );
 QTags.addButton( 'z_yyz', '优雅紫', '<div id="smcos_yyz">优雅紫</div>', "" );
 QTags.addButton( 'z_szh', '深邃黑', '<div id="smcos_szh">深邃黑</div>', "" );
 QTags.addButton( 'z_wbk', '无边框', '<div id="smcos_wbk">无边框</div>', "" ); 
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?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="smcos_mhz">迷幻紫</div>', "" );
 QTags.addButton( 'z_xgh', '西瓜红', '<div id="smcos_xgh">西瓜红</div>', "" );
 QTags.addButton( 'z_tkzj', '天空之境', '<div id="smcos_tkzj">天空之境</div>', "" );
 QTags.addButton( 'z_xyz', '小宇宙', '<div id="smcos_xyz">小宇宙</div>', "" );
 QTags.addButton( 'z_gll', '橄榄绿', '<div id="smcos_gll">橄榄绿</div>', "" );
 QTags.addButton( 'z_xty', '小太阳', '<div id="smcos_xty">小太阳</div>', "" );
 QTags.addButton( 'z_yyz', '优雅紫', '<div id="smcos_yyz">优雅紫</div>', "" );
 QTags.addButton( 'z_szh', '深邃黑', '<div id="smcos_szh">深邃黑</div>', "" );
 QTags.addButton( 'z_wbk', '无边框', '<div id="smcos_wbk">无边框</div>', "" ); 
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?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="smcos_mhz">迷幻紫</div>', "" );
 QTags.addButton( 'z_xgh', '西瓜红', '<div id="smcos_xgh">西瓜红</div>', "" );
 QTags.addButton( 'z_tkzj', '天空之境', '<div id="smcos_tkzj">天空之境</div>', "" );
 QTags.addButton( 'z_xyz', '小宇宙', '<div id="smcos_xyz">小宇宙</div>', "" );
 QTags.addButton( 'z_gll', '橄榄绿', '<div id="smcos_gll">橄榄绿</div>', "" );
 QTags.addButton( 'z_xty', '小太阳', '<div id="smcos_xty">小太阳</div>', "" );
 QTags.addButton( 'z_yyz', '优雅紫', '<div id="smcos_yyz">优雅紫</div>', "" );
 QTags.addButton( 'z_szh', '深邃黑', '<div id="smcos_szh">深邃黑</div>', "" );
 QTags.addButton( 'z_wbk', '无边框', '<div id="smcos_wbk">无边框</div>', "" ); 
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?php
 }

效果预览

子比主题美化 – WordPress在文章页添加彩色渐变框-亿点资源网
© 版权声明
版权声明 1、本网站名称：亿点资源网
2、本站永久网址：https://www.yjjmt.com
3、本站文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系客服QQ1297545494进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向客服举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END
子比教程
# wordpress# 彩色渐变框
喜欢就支持一下吧
赞赏 分享
SVIP的头像-亿点资源网会员
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容

站长简介
微信：YJDSG9
本人创业10年，多家网站VIP付费会员，本站分享创业项目、创业教程、主题源码、电商教程、工具软件等也不断的从淘宝购买很多教程和模板。 专门做了这个网站用来分享这些精品付款资源。

标签云
冒泡网中创网福缘网AI抖音小红书引流视频号无人直播电脑软件搬运快手短剧美女手机软件学习办公闲鱼微信直播挂机公众号主题美化小程序wordpress全自动Windows免费chatGPTQQ过原创搬砖脚本工具tiktok小工具B站破解版支付宝头条和平精英