宇宙超级无敌美化框网页代码分享

02380
宇宙超级无敌美化框网页代码分享插图

写网页有时候会用到一写盒子和卡片界面需求，避免从调试编写就可使用写好的美化css代码来优化卡片框。设置每个框的高度效果会更加明显。

使用：新建html网页，将提供的代码，添加到网页中合适位置即可。也可以用作博客美化都可。

代码分享如下：

html

<div id="zm_mhz">迷幻紫</div>
  <div id="zm_xgh">西瓜红</div>
  <div id="zm_tkzj">天空之境</div>
  <div id="zm_xyz">小宇宙</div>
  <div id="zm_gll">橄榄绿</div>
  <div id="zm_xty">小太阳</div>
  <div id="zm_yyz">优雅紫</div>
  <div id="zm_szh">深邃黑</div>
  <div id="zm_wbk">无边框</div>
<div id="zm_mhz">迷幻紫</div>
  <div id="zm_xgh">西瓜红</div>
  <div id="zm_tkzj">天空之境</div>
  <div id="zm_xyz">小宇宙</div>
  <div id="zm_gll">橄榄绿</div>
  <div id="zm_xty">小太阳</div>
  <div id="zm_yyz">优雅紫</div>
  <div id="zm_szh">深邃黑</div>
  <div id="zm_wbk">无边框</div>
<div id="zm_mhz">迷幻紫</div>
	<div id="zm_xgh">西瓜红</div>
	<div id="zm_tkzj">天空之境</div>
	<div id="zm_xyz">小宇宙</div>
	<div id="zm_gll">橄榄绿</div>
	<div id="zm_xty">小太阳</div>
	<div id="zm_yyz">优雅紫</div>
	<div id="zm_szh">深邃黑</div>
	<div id="zm_wbk">无边框</div>

css

<style type="text/css">
      /*宇宙超级无敌美化框 by:www.soujiz.com*/
      #zm_mhz,#zm_xgh,#zm_tkzj,#zm_xyz,#zm_gll ,#zm_xty,#zm_yyz,#zm_szh,#zm_wbk{
        /*圆角值,在此定义*/
        border-radius: 8px;
      }
      /*迷幻紫*/
      #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;
      }
    </style>
<style type="text/css">
      /*宇宙超级无敌美化框 by:www.soujiz.com*/
      #zm_mhz,#zm_xgh,#zm_tkzj,#zm_xyz,#zm_gll ,#zm_xty,#zm_yyz,#zm_szh,#zm_wbk{
        /*圆角值,在此定义*/
        border-radius: 8px;
      }
      /*迷幻紫*/
      #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;
      }
    </style>
<style type="text/css">
			/*宇宙超级无敌美化框 by:www.soujiz.com*/
			#zm_mhz,#zm_xgh,#zm_tkzj,#zm_xyz,#zm_gll ,#zm_xty,#zm_yyz,#zm_szh,#zm_wbk{
				/*圆角值,在此定义*/
				border-radius: 8px;
			}
			/*迷幻紫*/
			#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;
			}
		</style>
© 版权声明
版权声明 本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买 ，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。
THE END
技术教程
# 主题美化
喜欢点个赞支持一下吧
点赞0赏币 分享
To do the useful thing, to say the courageous thing, to contemplate the beautiful thing: that’s enough for one man’s life.
做有用的事，说勇敢的话，想美好的事，一生足矣
大雄的头像-大雄搜集站钻石会员
相关推荐
评论交流 抢沙发

请登录后发表评论

    暂无评论内容

AI影视导航
QQ各种解封合集系列得收藏-大雄搜集站

1QQ各种解封合集系列得收藏

大雄的头像-大雄搜集站钻石会员3年前
676
精选50张封面图缩略图高清插画素材-大雄搜集站

2精选50张封面图缩略图高清插画素材

大雄的头像-大雄搜集站钻石会员3年前
免费173
拼多多视频项目挂机脚本工具-大雄搜集站

3拼多多视频项目挂机脚本工具

大雄的头像-大雄搜集站钻石会员2年前
免费607
WordPress开源应用程序介绍-大雄搜集站

4WordPress开源应用程序介绍

大雄的头像-大雄搜集站钻石会员4年前
327
WebStack Pro网址导航wordPress一为主题-大雄搜集站

5WebStack Pro网址导航wordPress一为主题

大雄的头像-大雄搜集站钻石会员4年前
R币 19.91485
WordPress给网站添加鼠标右键自定义菜单美化-大雄搜集站

6WordPress给网站添加鼠标右键自定义菜单美化

大雄的头像-大雄搜集站钻石会员3年前
473
TOP1
TOP2
TOP3
TOP4
TOP5
TOP6
 

AI影视导航

 
汇聚数百款全球AI工具。各种免费VIP影视免费观看
立即进入🚀
最新评论
江海寄余生的头像-大雄搜集站

江海寄余生27天前0

111111111111111111
一***1的头像-大雄搜集站

一***127天前0

谢谢站长
寻***央的头像-大雄搜集站

寻***央29天前0

123478
poiuy的头像-大雄搜集站

poiuy29天前0

夸就完事了
没必要，真就没必要的头像-大雄搜集站

没必要，真就没必要36天前0

6666666666666
shadow的头像-大雄搜集站

shadow37天前0

大佬，请教下安装完后台打开提示 链接服务器失败 怎么解决
minecraft的头像-大雄搜集站

minecraft42天前0

9884854894
hxhvip1989的头像-大雄搜集站

hxhvip19891个月前0

感谢分享
标签云
重装系统设计视频表白表情包舔狗日记脚本网页模板编程素材程序源码福利破解独立部署特效源码开源源码二开源码买断游戏油猴脚本摸鱼插件接码短信平台抖音影视
坚持每天来逛逛，会让你
生活也美好了！
心情也舒畅了！
走路也有劲了！
腿也不痛了！
腰也不酸了！
工作也轻松了！
你好我也好，不要忘记哦!