2、样式属性详解（上）：背景属性（颜色、渐变、圆角、边框宽度）
好，咱们直接进入正题。
背景属性，是 LVGL 样式系统里最基础、也最常用的部分。说白了，你屏幕上看到的每一个控件，它的底色、圆角、边框，都是靠这几个属性撑起来的。我刚开始用 LVGL 的时候，觉得这玩意儿不就是调个颜色嘛，有啥好学的？结果后来踩了不少坑，才发现这里面的门道还真不少。
2.1 背景颜色：不只是填个色
先看最基础的——背景颜色。LVGL 里用 lv_style_set_bg_color() 来设置。你可能会想，这有啥好讲的？嗯，这里要注意：LVGL 的颜色系统是 32 位的，包含 RGB 和透明度通道。
/* 设置纯红色背景 */
lv_style_set_bg_color(&style, lv_color_hex(0xFF0000));
/* 带透明度的红色 */
lv_style_set_bg_opa(&style, LV_OPA_50); /* 半透明 */我个人习惯把颜色值写成 lv_color_hex() 的形式，直观又好记。但有个坑——如果你直接传 0xFF0000 给 lv_color_t 类型，编译器会报错。别问我怎么知道的，我曾经在项目里因为这个低级错误排查了半小时。
lv_color_hex(0xRRGGBB)，发布前再考虑用 lv_palette_main() 取主题色，方便后期换皮肤。
2.2 背景透明度：别忽略这个参数
透明度属性 bg_opa 经常被新手忽略。你想想看，如果你只设了颜色没设透明度，默认是 LV_OPA_COVER（完全不透明）。但有时候你希望背景透出底层的颜色或图片，那就得调这个值。
lv_style_set_bg_opa(&style, LV_OPA_30); /* 30% 不透明度 */取值范围是 0~255，或者用枚举常量：LV_OPA_TRANSP（0）、LV_OPA_10（25）、LV_OPA_50（128）、LV_OPA_COVER（255）。
2.3 背景渐变：从单色到多色的进阶
单色背景看久了会腻，对吧？LVGL 支持线性渐变，而且用起来相当顺手。
/* 设置渐变 */
lv_style_set_bg_grad_color(&style, lv_color_hex(0x0000FF)); /* 终点色：蓝色 */
lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER); /* 垂直渐变 */
lv_style_set_bg_grad_start(&style, 0); /* 起始位置 */
lv_style_set_bg_grad_stop(&style, 255); /* 结束位置 */渐变方向有三种：LV_GRAD_DIR_VER（垂直）、LV_GRAD_DIR_HOR（水平）、LV_GRAD_DIR_NONE（无渐变）。
我记得有一次做仪表盘项目，客户要求背景从深蓝到浅蓝渐变，模拟天空效果。我一开始用了水平渐变，结果看起来像日出，客户说不对。改成垂直渐变后，从上到下由深变浅，效果就对了。所以方向很重要，别搞反了。
bg_grad_color 是终点。如果你只设了渐变颜色没设主色，那渐变效果可能出不来。
2.4 圆角：让界面变柔和的关键
圆角属性 border_radius 能让你的界面从「硬核工业风」变成「现代简约风」。设置方法很简单：
lv_style_set_border_radius(&style, 10); /* 圆角半径 10 像素 */圆角半径越大，角越圆。设成 0 就是直角，设成控件高度的一半，就成了胶囊形状。我经常用这个做按钮，效果很好。
但有个坑——圆角只对背景和边框生效，对控件内部的内容（比如文字、图片）不影响。你想想看，如果你给一个按钮设了圆角，但按钮里的文字还是直愣愣地顶到边缘，那多难看。所以通常要配合 pad 内边距一起用。
lv_obj_set_style_radius() 单独控制。
2.5 边框宽度：别小看这一条线
边框属性 border_width 控制控件边缘的线条粗细。默认是 0，也就是没有边框。
lv_style_set_border_width(&style, 2); /* 边框宽度 2 像素 */
lv_style_set_border_color(&style, lv_color_hex(0xCCCCCC)); /* 边框颜色 */
lv_style_set_border_opa(&style, LV_OPA_60); /* 边框透明度 */边框颜色和透明度是独立于背景的。你可以让背景半透明，但边框完全不透明，这样会有一种「玻璃面板」的效果。我在做智能家居面板时用过这个技巧，视觉层次感一下子就出来了。
另外，边框宽度会影响控件的总尺寸。比如你设了一个 100x50 的按钮，边框宽度为 2，那实际占用的像素是 104x54（左右各加 2，上下各加 2）。这个在布局时要算清楚，不然控件会「越界」。
| 属性 | 函数 | 默认值 | 说明 |
|---|---|---|---|
| 背景颜色 | lv_style_set_bg_color() |
0xFFFFFF |
32 位 RGB 颜色 |
| 背景透明度 | lv_style_set_bg_opa() |
LV_OPA_COVER |
0~255 或枚举常量 |
| 渐变终点色 | lv_style_set_bg_grad_color() |
0x000000 |
与主色配合使用 |
| 渐变方向 | lv_style_set_bg_grad_dir() |
LV_GRAD_DIR_NONE |
水平/垂直/无 |
| 圆角半径 | lv_style_set_border_radius() |
0 | 像素值 |
| 边框宽度 | lv_style_set_border_width() |
0 | 像素值 |
| 边框颜色 | lv_style_set_border_color() |
0x000000 |
独立于背景色 |
| 边框透明度 | lv_style_set_border_opa() |
LV_OPA_COVER |
独立于背景透明度 |
2.6 综合示例：一个现代风格的按钮
说了这么多，咱们来写一个完整的例子。把上面这些属性组合起来，做一个漂亮的按钮：
/* 定义样式 */
static lv_style_t style_btn;
lv_style_init(&style_btn);
/* 背景：浅蓝到深蓝渐变 */
lv_style_set_bg_color(&style_btn, lv_color_hex(0x4FC3F7)); /* 浅蓝 */
lv_style_set_bg_grad_color(&style_btn, lv_color_hex(0x0288D1)); /* 深蓝 */
lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER);
lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);
/* 圆角：稍微圆润 */
lv_style_set_border_radius(&style_btn, 8);
/* 边框：细线，半透明 */
lv_style_set_border_width(&style_btn, 1);
lv_style_set_border_color(&style_btn, lv_color_hex(0xFFFFFF));
lv_style_set_border_opa(&style_btn, LV_OPA_30);
/* 应用到按钮 */
lv_obj_t *btn = lv_btn_create(lv_scr_act());
lv_obj_add_style(btn, &style_btn, 0);这个按钮的效果是：浅蓝到深蓝的垂直渐变，带 8 像素圆角，外加一条半透明白色细边框。嗯，看起来就很「现代」了。
好了，背景属性的上半部分就讲到这里。下一节咱们接着聊背景的进阶玩法——图片背景、图案平铺、还有背景的缩放和对齐。到时候再给你分享几个我在实际项目中用到的骚操作。