博客主页 🍚
标签

css

下的文章

Count:

计 1 篇
337
好看的css美化框
2021-07-23
分类: 📝美化
简介:文字框美化样式效果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; }
博客主页 火喵博客・日记本 经为流逝的日月,纬为人们的生业 51统计 百度统计 🌸
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 十年之约 2 年 326 天 11 小时 6 分 🌸 本站由 Typecho 建站,并搭配自制 MyDiary 主题 Copyright © 2009 ~ 2023. 火喵酱 All rights reserved.
历史足迹
分类目录
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活
  • 打赏图
    打赏博主
    欢迎
    欢迎
    欢迎访问火喵博客・日记本
    欢迎来看望喵喵!