博客主页 😞
标签

转载

下的文章

Blog:

火喵博客・日记本
好看的css美化框
文字框美化样式效果CSS代码#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; }前端引用<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代码/* 特殊字体 */ @font-face { font-family: 'Font Awesome 5 Free'; src: url('https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/webfonts/fa-solid-900.woff2') format('woff2'); } /*提示栏样式*/ .tip { position: relative; color: #fff; background: #20a0ff; background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff)); background: -webkit-linear-gradient(left,#20a0ff,#20b8ff); background: linear-gradient(90deg,#20a0ff,#20b8ff); padding: 6px 20px; border-radius: 10px; -webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5); box-shadow: 0 3px 5px rgba(32,160,255,.5); margin-bottom: 20px; } .tip.success { background: #61be33; background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44)); background: -webkit-linear-gradient(left,#61be33,#8fce44); background: linear-gradient(90deg,#61be33,#8fce44); text-shadow: 0 -1px #61be33; -webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5); box-shadow: 0 3px 5px rgba(104,195,59,.5); } .tip.error { background: #ff4949; background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849)); background: -webkit-linear-gradient(left,#ff4949,#ff7849); background: linear-gradient(90deg,#ff4949,#ff7849); text-shadow: 0 -1px #ff4949; -webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5); box-shadow: 0 3px 5px rgba(255,73,73,.5); } .tip.warning { background: #ff953f; background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449)); background: -webkit-linear-gradient(left,#ff953f,#ffb449); background: linear-gradient(90deg,#ff953f,#ffb449); text-shadow: 0 -1px #ff953f; -webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5); box-shadow: 0 3px 5px rgba(255,154,73,.5); } .tip:before { background: #20a0ff; background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff)); background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff); background: linear-gradient(0deg,#0092ff,#20b8ff); border-radius: 50%; color: #fff; content: "\f129"; font-size: 12px; position: absolute; width: 24px; height: 24px; line-height: 24.5px; left: -12px; top: -12px; -webkit-box-shadow: 0 0 0 2.5px #fff; box-shadow: 0 0 0 2.5px #fff; font-weight: 600; font-family: "Font Awesome 5 Free"; text-align: center; } .tip.success:before { background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b)); background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b); background: linear-gradient(0deg,#52bb1d,#95d34b); content: "\f00c"; text-shadow: 0 -1px #61be33; } .tip.error:before { background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849)); background: -webkit-linear-gradient(bottom,#ff3838,#ff7849); background: linear-gradient(0deg,#ff3838,#ff7849); content: "\f00d"; text-shadow: 0 -1px #ff4949; } .tip.warning:before { background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149)); background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149); background: linear-gradient(0deg,#ff8f35,#ffc149); content: "\f12a"; text-shadow: 0 -1px #ff953f; }
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 本站已运行 2 年 202 天 12 小时 26 分 51统计 百度统计 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2020 ~ 2022. 火喵博客・日记本 All rights reserved.
历史足迹
分类目录
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活