ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Hexo-NexT 设置圆角

2021-08-28 10:32:44  阅读:302  来源: 互联网

标签:3px 圆角 Hexo 2px NexT radius rgba border


  1. 在 blog_root/source/_data/variables.styl 中增加下列代码:
// 圆角设置
$border-radius-inner     = 20px;
$border-radius           = 20px;
  1. 然后在 NexT 的配置文件 _config.yml 中取消 variables.styl 的注释:
variable: source/_data/variables.styl
  1. 问题描述
    侧边栏的圆角明显有一层阴影,圆角效果不明显
    problem
  2. 问题解决
    github issues 上也有人提过类似的问题侧边栏顶栏无法显示为圆角,并且给出了回答。
    issues
    回答中有提到黑色背景覆盖了圆角,所以我尝试了下将黑色改为透明,成功实现。具体是修改 /themes/next/source/css/_variables/Gemini.styl 内代码,将 $body-bg-color 赋值为透明 transparent。
// Variables of Gemini scheme
// ==================================================

@import "Pisces.styl";

// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color           = #eee;
// $body-bg-color           = transparent;
// Borders.
// --------------------------------------------------
$box-shadow-inner        = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12);
$box-shadow              = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 -1px .5px 0 rgba(0, 0, 0, .09);

// $border-radius-inner     = 20px;
// $border-radius           = 20px;

$border-radius-inner     = initial;
$border-radius           = initial;
// $border-radius-inner     = 0 0 3px 3px;
// $border-radius           = 3px;

标签:3px,圆角,Hexo,2px,NexT,radius,rgba,border
来源: https://www.cnblogs.com/cscshi/p/15196119.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有