好看的css彩色提示框样式

效果图：

css：

/*迷幻紫*/
#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;
}

/*移动端适配*/
@media (max-width:768px) {
.baidu_zmki_cx a {
    float: right;
    margin-top: 10px;
    margin-right: 0px;
}
.content_zmki_bq {
    line-height: 1.4;
    font-size: 13px;
}
/*经典系列引用（公用于用文章内）*/ 
/*网站新增彩色警示文本框*/ 
	/*彩色代码框样式开始*/
	#sc_notice {
	 color: #7da33c;
	 background: #ecf2d6 url('https://a-oss.zmki.cn/img/sc_notice.png') -1px -1px no-repeat;
	 border: 1px solid #aac66d;
	 overflow: hidden;
	 margin: 10px 0;
	 padding: 15px 15px 15px 35px;
	 }
	#sc_warn {
	 color: #ad9948;
	 background: #fff4b9 url('https://a-oss.zmki.cn/img/sc_warn.png') -1px -1px no-repeat;
	 border: 1px solid #eac946;
	 overflow: hidden;
	 margin: 10px 0;
	 padding: 15px 15px 15px 35px;
	 }
	#sc_error {
	 color: #c66;
	 background: #ffecea url('https://a-oss.zmki.cn/img/sc_error.png') -1px -1px no-repeat;
	 border: 1px solid #ebb1b1;
	 overflow: hidden;
	 margin: 10px 0;
	 padding: 15px 15px 15px 35px;
	 }
	#sc_tips {
	 color: #777;
	 background: #eaeaea url('https://a-oss.zmki.cn/img/sc_tips.png') -1px -1px no-repeat;
	 border: 1px solid #ccc;
	 overflow: hidden;
	 margin: 10px 0;
	 padding: 15px 15px 15px 35px;
	}
	#sc_blue {
	 color: #1ba1e2;
	 background: rgba(27, 161, 226, 0.26) url('https://a-oss.zmki.cn/img/sc_blue.png') -1px -1px no-repeat;
	 border: 1px solid #1ba1e2;
	 overflow: hidden;
	 margin: 10px 0;
	 padding: 15px 15px 15px 35px;
	}
	#sc_black {
	 border-width: 1px 4px 4px 1px;
	 border-style: solid;
	 border-color: #3e3e3e;
	 margin: 10px 0;
	 padding: 15px 15px 15px 35px;
	}
	#sc_xuk {
	 border: 2px dashed rgb(41, 170, 227);
	 background-color: rgb(248, 247, 245);
	 margin: 10px 0;
	 padding: 15px 15px 15px 35px;
	}
	#sc_lvb {
	 margin: 10px 0;
	 padding: 10px 15px;
	 border: 1px solid #e3e3e3;
	 border-left: 2px solid #05B536;
	 background: #FFF;
	}
	#sc_redb {
	 margin: 10px 0;   padding: 10px 15px;
	 border: 1px solid #e3e3e3;
	 border-left: 2px solid #ED0505;
	 background: #FFF;
	}
	#sc_organge {
	 margin: 10px 0;
	 padding: 10px 15px;
	 border: 1px solid #e3e3e3;
	 border-left: 2px solid #EC8006;
	 background: #FFF;
	}
	/*网站新增彩色警示文本框 结束*/