【Wordpress】美化之文章內頁新增彩色漸變框 (共9套)

文本是《WordPress（共53篇）》專題的第 46 篇。閱讀本文前，建議先閱讀前面的文章：

提示: 經後續測試發現：此文章css樣式部分效果在安卓Android設備上會出現部分不相容無法顯示完整效果。如天空之境在安卓設備上顯示是純粉色。 PC和iOS均顯示正常。

彩色漸變框一共9種樣式。其中一個是無邊框透明的。也湊數放一起了（但也帶格式的）。

效果演示

使用教學

首先把下面的CSS丟到你的主題style.css樣式檔內。圓角值修改下邊的第三行即可。預設8px

#lx_mhz,#lx_xgh,#lx_tkj,#lx_xyz,#lx_gll ,#lx_xty,#lx_yyz,#lx_szh,#lx_wbk{
	/*圓角值,在此定義*/
	border-radius: 8px;
}
/*迷幻紫*/
#lx_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%);
}
/*西瓜红*/
#lx_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%);
}
/*天空境*/
#lx_tkj {
    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%);
}
/*小宇宙*/
#lx_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% );
}
/*橄欖綠*/
#lx_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% );
}
/*小太陽*/
#lx_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% );
}
/*優雅紫*/
#lx_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% );
}
/*深邃黑*/
#lx_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% );
}
/*無邊框*/
#lx_wbk {
    color: #000000;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#lx_xyz a , #lx_gll a{
	 color: #eeeeee;
}
#lx_szh a{
	color: #c7c7c7;	
}
#lx_xty a, #lx_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( 'l_mhz', '迷幻紫', '<div id="lx_mhz">迷幻紫</div>n', "" );
QTags.addButton( 'l_xgh', '西瓜红', '<div id="lx_xgh">西瓜红</div>n', "" );
QTags.addButton( 'l_tkj', '天空境', '<div id="lx_tkj">天空境</div>n', "" );
QTags.addButton( 'l_xyz', '小宇宙', '<div id="lx_xyz">小宇宙</div>n', "" );
QTags.addButton( 'l_gll', '橄欖綠', '<div id="lx_gll">橄欖綠</div>n', "" );
QTags.addButton( 'l_xty', '小太陽', '<div id="lx_xty">小太陽</div>n', "" );
QTags.addButton( 'l_yyz', '優雅紫', '<div id="lx_yyz">優雅紫</div>n', "" );
QTags.addButton( 'l_szh', '深邃黑', '<div id="lx_szh">深邃黑</div>n', "" );
QTags.addButton( 'l_wbk', '無邊框', '<div id="lx_wbk">無邊框</div>n', "" ); 
QTags.addButton( 'l', '無', '<div>', "</div>\n" );
function bolo_QTnextpage_arg1() {
}
</script>
<?php
}
/*添加文本編輯自定義快捷標簽按鈕 結束*/

使用說明

WordPress後台文章編輯器文字選項插入相應文字框即可。可返回視覺化編輯操作。如換行不生效可檢查div嵌套關係。

您已閱讀完《WordPress（共53篇）》專題的第 46 篇。請繼續閱讀該專題下面的文章：

文章標題：【Wordpress】美化之文章內頁新增彩色漸變框 (共9套)

本文鏈接：https://angelal.cc/1868.html

文章版權：除非特別註明，否則均為AngelaL的原創文章，轉載必須以鏈接形式標明本文鏈接

本文最後更新發佈於：2025年03月10日 02:02, 某些文章具有時效性,若有錯誤或已失效,請在下方留言。

AngelaL博客

本文是原創文章，採用CC BY-NC-SA 4.0協議，完整轉載請註明來自AngelaL博客

{{userData.name}}已認證

【Wordpress】美化之文章內頁新增彩色漸變框 (共9套)

效果演示

使用教學

使用說明

Cloudreve網盤對接易支付碼支付教程

【Wordpress】無需外掛程式限制用戶進入後台控制面板介面

搞怪驚訝動物系列頭像

Readest電子書閱讀器

Flatnotes 自託管無庫筆記應用

【Wordpress】美化之文章內頁新增彩色漸變框 (共9套)

PHP隨機Bing每日一圖APi代碼及調用方法

關於我們

熱門頻道

聯繫合作

QQ/微信

极主题,超级好看,开源,可自定义的子主题

AngelaL博客等你來關注