搜索到
4
篇与
的结果
-
-
-
文章颜色包裹文字代码实现 迷幻紫西瓜红天空之境小太阳小宇宙橄榄绿优雅紫深邃黑无边框{lamp/}以上的效果是怎么实现的呢，其实很简单的，下面我将代码分享给大家。首先是用一个div包裹，用ID选择器，代码如下：（这些个代码是放在文章中使用的，当然你在其他的页面中也是可以的，我只针对Joe主题，因为其他的主题没有测试，如果不显示的话请在代码的前后用三个英文状态下的感叹号 ！进行代码的包裹：就像这样！！！<——div id="baozhu_mhz">迷幻紫</div——>！！！为防止代码被解析我用了横线 ）<div id="baozhu_mhz">迷幻紫</div> <div id="baozhu_xgh">西瓜红</div> <div id="baozhu_tkzj">天空之境</div> <div id="baozhu_xty">小太阳</div> <div id="baozhu_xyz">小宇宙</div> <div id="baozhu_gll">橄榄绿</div> <div id="baozhu_yyz">优雅紫</div> <div id="baozhu_szh">深邃黑</div> <div id="baozhu_wbk">无边框</div>在你的网站根目录中创建一个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代码，引入代码是这样写：<link rel="stylesheet" href="你的css路径">效果直接在head里面引入，随后发布文章的时候直接用div和id的html代码就行啦。
-
（转载）底部自定义美化按钮 最近浏览博客，看到不少朋友这个底部的美化，我也觉得底部的这些按钮平平无奇，就想着用css设置一个样式，从而美化按钮方法，至此分享给大家。教程分为两步，添加 css 样式和添加 HTML 代码即可如下（自定义） {collapse}{collapse-item label="1.主题设置—>全局设置—>自定义CSS样式代码：,添加以下 CSS 代码：" open}/*CSS 代码网站底部按钮美化 www.youchen.club*/ :root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge { display: inline-block; border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; line-height: 15px; margin-bottom: 5px; } .badge-subject { display: inline-block; background-color: #4d4d4d; padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .github-badge .bg-blue { background-color: #007ec6; } .github-badge .bg-brightgreen { background-color: #4dc820; } .github-badge .bg-blueviolet { background-color: #8833d7; } .github-badge .badge-value { display: inline-block; padding: 4px 6px 4px 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .github-badge .bg-orange { background-color: orange; } .github-badge .bg-red { background-color: red; } /*CSS 代码网站底部按钮美化结束 www.youchen.club*/ {/collapse-item}{collapse-item label="2、主题设置—>底部设置—>网站底部右侧自定义链接,添加以下 HTML 代码："}<!--网站底部按钮美化 html 开始 by 友晨科技 www.youchen.club--> <div class="github-badge"> <span class="badge-subject bg-blue"> <a style="color:#fff" href="链接" target="_blank">巴拉巴拉</a> </span>- <span class="badge-subject bg-brightgreen"> <a style="color:#fff" href="链接" target="_blank">巴拉巴拉</a> </span>- <span class="badge-subject bg-green"> <a style="color:#fff" href="链接" target="_blank">巴拉巴拉</a> </span>- <span class="badge-subject bg-orange"> <a style="color:#fff" href="链接" target="_blank">巴拉巴拉</a> </span>- <span class="badge-value bg-blueviolet"> <a style="color:#fff" href="链接" target="_blank">巴拉巴拉</a> </span>- <span class="badge-value bg-red"> <a style="color:#fff" href="链接" target="_blank">巴拉巴拉</a> </div> <!--网站底部按钮美化 html 结束 by 友晨科技 www.youchen.club--> {/collapse-item}{/collapse}原创文章，作者：苏晨 原文地址:https://blog.sxchl.cn/77.html
