WordPress文章页新增彩色渐变框

将下面的CSS放入WordPress所在主题的style.css样式文件内,圆角值修改代码的第三行即可,默认8px
/*WordPress文章内容美化框*/#mhz,#xgh,#tkzj,#xyz,#gll ,#xty,#yyz,#szh,#wbk {
 /*圆角值,在此定义*/
	border-radius: 8px;
} /*迷幻紫*/#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%);
} /*西瓜红*/#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 天空之境*/#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%);
} /*小宇宙*/#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% );
} /*橄榄绿*/#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% );
} /*小太阳*/#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% );
} /*优雅紫*/#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% );
} /*深邃黑*/#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% );
} /*无边框*/#wbk {
	color: #000000;
	overflow: hidden;
	margin: 10px 0;
	padding: 15px 15px 15px 35px;
}

#xyz a , #gll a {
	color: #eeeeee;
}

#szh a {
	color: #c7c7c7;
}

#xty a, #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( 'mhz', '迷幻紫', '<div id="mhz">迷幻紫</div>\n', "" );
 QTags.addButton( 'xgh', '西瓜红', '<div id="xgh">西瓜红</div>\n', "" );
 QTags.addButton( 'tkzj', '天空之境', '<div id="tkzj">天空之境</div>\n', "" );
 QTags.addButton( 'xyz', '小宇宙', '<div id="xyz">小宇宙</div>\n', "" );
 QTags.addButton( 'gll', '橄榄绿', '<div id="gll">橄榄绿</div>\n', "" );
 QTags.addButton( 'xty', '小太阳', '<div id="xty">小太阳</div>\n', "" );
 QTags.addButton( 'yyz', '优雅紫', '<div id="yyz">优雅紫</div>\n', "" );
 QTags.addButton( 'szh', '深邃黑', '<div id="szh">深邃黑</div>\n', "" );
 QTags.addButton( 'wbk', '无边框', '<div id="wbk">无边框</div>\n', "" ); 
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?php
 }
 /*添加文本编辑自定义快捷标签按钮 结束*/
使用方法
如图,WordPress后台文章编辑器文本选项插入相应文本框即可,可返回可视化编辑操作,如换行不生效可检查div嵌套关系

效果如下:
1、迷幻紫
2、西瓜红
3、天空之境
4、小宇宙
5、橄榄绿
6、小太阳
7、优雅紫
8、深邃黑
9、无边框
 收藏 (0) 赞助

赞助超卓网

支付宝

微信

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《WordPress文章页新增彩色渐变框》
文章链接:https://chaozhuowang.com/1129.html
分享到: 生成海报
  以上文章内容包括但不限于(文字、图片、软件、程序等)部分来自网络搜集并进行整理,本网站提供的内容仅用于个人学习、研究使用,我们不能保证内容的正确性与完整性。通过使用本站内容随之而来的风险与本站无关,访问者可将本网站提供的内容或服务用于个人学习、研究等,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯本网站及相关权利人的合法权利。

留言 抢沙发

评论前必须登录!

立即登录   注册

超卓网,免费分享资源的网站

9.9包邮超卓驿站
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活