文章中包裹文字代码实现

迷幻紫

西瓜红

天空之境

小太阳

小宇宙

橄榄绿

优雅紫

深邃黑

无边框

以上的效果是怎么实现的呢，其实很简单的，下面我将代码分享给大家。

首先是用一个div包裹，用ID选择器，代码如下：（这些个代码是放在文章中使用的，当然你在其他的页面中也是可以的，我只针对Joe主题，因为其他的主题没有测试，如果不显示的话请在代码的前后用三个英文状态下的感叹号 ！进行代码的包裹：就像这样！！！——div id="baozhu_mhz"> 迷幻紫！！！为防止代码被解析我用了横线 ）

迷幻紫
西瓜红
天空之境
小太阳
小宇宙
橄榄绿
优雅紫
深邃黑
无边框

在你的网站根目录中创建一个css文件，放入下面的css代码：

@charset "utf-8";

#baozhu_mhz,#baozhu_xgh,#baozhu_tkzj,#baozhu_xyz,#baozhu_gll ,#baozhu_xty,#baozhu_yyz,#baozhu_szh,#baozhu_wbk{
    
    border-radius: 8px;

}

/*迷幻紫*/
#baozhu_mhz{
    
    color: #555555;
    
    overflow: hidden;
    
    margin: 10px 0;
    
    padding: 15px 15px 15px 15px;
    
    /*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%);

}

/*西瓜红*/
#baozhu_xgh{
    
        color: #555555;
    
    overflow: hidden;
    
    margin: 10px 0;
    
    padding: 15px 15px 15px 15px;
    
    /*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%);

}

/*天空之境*/
#baozhu_tkzj {
    
    color: #555555;
    
    overflow: hidden;
    
    margin: 10px 0;
    
    padding: 15px 15px 15px 15px;
    
    /*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%);

}

/*小宇宙*/
#baozhu_xyz {
    
    color: #eeeeee;
    
    overflow: hidden;
    
    margin: 10px 0;
    
    padding: 15px 15px 15px 15px;
    
    /*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% );

}

/*橄榄绿*/
#baozhu_gll {
    
    color: #eeeeee;
    
    overflow: hidden;
    
    margin: 10px 0;
    
    padding: 15px 15px 15px 15px;
    
    /*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% );

}

/*小太阳*/
#baozhu_xty {
    
    color: #ffffff;
    
    overflow: hidden;
    
    margin: 10px 0;
    
    padding: 15px 15px 15px 15px;
    
     /*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% );

}

/*优雅紫*/
#baozhu_yyz {
    
    color: #ffffff;
    
    overflow: hidden;
    
    margin: 10px 0;
    
    padding: 15px 15px 15px 15px;
    
    /*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% );

}

/*深邃黑*/
#baozhu_szh {
    
    color: #c7c7c7;
    
    overflow: hidden;
    
    margin: 10px 0;
    
    padding: 15px 15px 15px 15px;
    
    /*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% );

}

/*无边框*/
#baozhu_wbk {
    
    color: #000000;
    
    overflow: hidden;
    
    margin: 10px 0;
    
    padding: 15px 15px 15px 15px;

}

#baozhu_xyz a , #baozhu_gll a{
    
     color: #eeeeee;

}

#baozhu_szh a{
    
    color: #c7c7c7;
    
}

#baozhu_xty a, #baozhu_yyz a{
    
    color: #ffffff;

}
    

弄好之后引入你的css代码，引入代码是这样写：

效果

直接在head里面引入，随后发布文章的时候直接用div和id的html代码就行啦。

效果就是这样的，深邃黑的字改为你想要输入的文字即可，知道之后还不快去试试？

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！