QSS样式表圆角

圆角

• border-radius属性。
• 例子：

代码语言：javascript复制

QPushButton *btn = new QPushButton(this);
btn->setStyleSheet(R"(
                   QPushButton
                   {
                       width: 100px;
                       height: 60px;
                       border-radius: 8px;
                       background-color: #008cba;
                   }
                   )");
btn->show();

指定左上角圆角

• border-top-left-radius属性。
• 例子：

代码语言：javascript复制

QPushButton *btn = new QPushButton(this);
btn->setStyleSheet(R"(
                   QPushButton
                   {
                       width: 100px;
                       height: 60px;
                       border-top-left-radius: 8px;
                       background-color: #008cba;
                   }
                   )");
btn->show();

指定右上角圆角

• border-top-right-radius属性。
• 例子：

代码语言：javascript复制

QPushButton *btn = new QPushButton(this);
btn->setStyleSheet(R"(
                   QPushButton
                   {
                       width: 100px;
                       height: 60px;
                       border-top-right-radius: 8px;
                       background-color: #008cba;
                   }
                   )");
btn->show();

指定左下角圆角

• border-bottom-left-radius属性。
• 例子：

代码语言：javascript复制

QPushButton *btn = new QPushButton(this);
btn->setStyleSheet(R"(
                   QPushButton
                   {
                       width: 100px;
                       height: 60px;
                       border-bottom-left-radius: 8px;
                       background-color: #008cba;
                   }
                   )");
btn->show();

指定右下角圆角

• border-bottom-right-radius属性。
• 例子：

代码语言：javascript复制

QPushButton *btn = new QPushButton(this);
btn->setStyleSheet(R"(
                   QPushButton
                   {
                       width: 100px;
                       height: 60px;
                       border-bottom-right-radius: 8px;
                       background-color: #008cba;
                   }
                   )");
btn->show();

关于更多

• 除了样式表圆角还可以设置某个边框的颜色、宽度。如：

代码语言：javascript复制

/* 设置边框样式风格为实线 */
border-style: solid;
/* 设置顶部边框宽度为5px */
border-top-width: 5px; 
/* 设置顶部边框颜色为红色 */
border-top-color: red;

border

0 人点赞