为Nodejs的nodeclub中的面板增加圆角效果

为Nodejs的nodeclub中的面板增加圆角效果

nodeclub是个非常好的社区模板。 如果您不喜欢其中面板的坦率个性，可以为其增加圆角效果。 只需修改文件/public/stylesheets/style.css:

.panel {
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
-o-border-radius: 9px;
border-radius: 9px;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

background-color: #fff;
border: 2px solid #fff;
}

3 回复

为Nodejs的nodeclub中的面板增加圆角效果

nodeclub 是一个非常优秀的社区模板。如果您不喜欢其中面板的直角边框带来的“坦率个性”，可以通过简单的CSS修改为其增加圆角效果。

修改步骤：

  1. 找到并打开样式文件： 首先，您需要定位到 nodeclub 的样式文件。通常情况下，样式文件位于项目的 public/stylesheets 目录下。在这个目录中，找到名为 style.css 的文件，并将其打开进行编辑。

  2. 修改样式文件： 在 style.css 文件中，找到 .panel 类的选择器，并对其进行修改。以下是具体的修改内容：

.panel {
    -webkit-border-radius: 9px; /* 圆角效果（适用于Safari和旧版Chrome） */
    -moz-border-radius: 9px;    /* 圆角效果（适用于旧版Firefox） */
    -o-border-radius: 9px;      /* 圆角效果（适用于旧版Opera） */
    border-radius: 9px;         /* 圆角效果（现代浏览器通用） */

    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /* 添加阴影效果（适用于Safari和旧版Chrome） */
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);    /* 添加阴影效果（适用于旧版Firefox） */
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);      /* 添加阴影效果（适用于旧版Opera） */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);         /* 添加阴影效果（现代浏览器通用） */

    background-color: #fff; /* 背景颜色 */
    border: 2px solid #fff; /* 边框颜色 */
}

解释：

  • border-radius：这是实现圆角的关键属性。通过设置不同的像素值，您可以调整圆角的弧度大小。在这里，我们设置为 9px，这会使得面板的四个角呈现出一定的圆润感。

  • box-shadow：这是一个可选的属性，用于给面板添加阴影效果，使其看起来更加立体。通过设置 0 1px 2px rgba(0, 0, 0, 0.25)，可以在面板周围添加轻微的阴影，增强视觉效果。

  • background-color 和 border：这两个属性分别定义了面板的背景色和边框样式。这里我们将背景色设置为白色 (#fff)，并将边框设置为2像素宽的白色实线。

通过以上步骤，您就可以轻松地为 nodeclub 中的面板添加圆角效果了。希望这些信息对您有所帮助！


说起来 CNode Github 上几个月没更新了…

要在 Nodejs 的 nodeclub 中为面板增加圆角效果，可以通过修改 CSS 文件来实现。下面是具体的步骤和代码示例：

修改 CSS 文件

  1. 打开 nodeclub 项目的 public/stylesheets/style.css 文件。
  2. 找到 .panel 类，并添加或修改以下样式属性：
.panel {
    -webkit-border-radius: 10px; /* 圆角效果，兼容 WebKit 浏览器 */
    -moz-border-radius: 10px;    /* 圆角效果，兼容 Mozilla 浏览器 */
    -o-border-radius: 10px;      /* 圆角效果，兼容 Opera 浏览器 */
    border-radius: 10px;         /* 圆角效果，标准语法 */

    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /* 阴影效果，兼容 WebKit 浏览器 */
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);    /* 阴影效果，兼容 Mozilla 浏览器 */
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);      /* 阴影效果，兼容 Opera 浏览器 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);         /* 阴影效果，标准语法 */

    background-color: #fff;       /* 背景颜色 */
    border: 2px solid #fff;       /* 边框 */
}

解释

  • border-radius 属性用于设置元素的圆角效果，值 10px 表示圆角半径为 10 像素。
  • box-shadow 属性用于给面板添加阴影效果，使得面板看起来更立体。
  • background-color 和 border 用于设置背景颜色和边框样式。

注意事项

确保你的 style.css 文件在浏览器中被正确加载。如果修改后没有看到效果，检查是否有其他样式覆盖了这些设置，或者清除浏览器缓存。

这样，你就可以为 nodeclub 中的面板增加圆角效果了。

回到顶部