PIX主题07：页面圆角和直角设置

pix设置两栏后下面出现如图情况，为了美观，我们把这两个角要设置成直角。

问题描述

在使用PIX主题并设置为两栏布局时，页面底部会出现圆角效果，这可能会影响整体美观度。如下图所示：

解决方案

代码中查看到在 page_main 中的边框圆角border-radius。我们需要修改CSS文件来调整圆角设置。

步骤一：定位文件

设置路径如下：

pix → inc → assets → css → main.css

步骤二：修改CSS

在main.css中找到上面图片中的位置，把后面的12px改成0px即可。

可以用FTP下载css改，或者在主题文件编辑器中按上面的路径找到相应位置，更改即可。

/* 修改前 */
border-radius: 12px;

/* 修改后 */
border-radius: 0px;

进一步优化

按照之前的设置是把page_main的四角都变成了直角，所以会发现右上角会有一个白色的小尖尖。想把它去掉，的设置如下：

把border-radius去掉，分别对四个角进行设置即可。

/* 分别设置四个角的圆角 */
border-top-left-radius: 0px;
border-top-right-radius: 12px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;

最终效果

修改完成后，页面底部将显示为直角，整体视觉效果更加协调统一。