學習Qss--前景、邊框屬性

一、前景屬性

與背景相對應，背景設置的是控件的最底層的顏色，作爲背景，但color設置的是前景色，也就是控件文字的顏色，color屬性是被所有widget都支持的。
格式：

color: Brush類型的值；

舉例

QTextEdit
{
	color: red;
	background-color: skyblue;
}

二、邊框屬性

border-width

取值：？px 像素寬度，數值後面一定要加上像素單位px，也有其它單位，但不推薦使用
作用：用於邊框寬度
舉例：

QTextEdit
{
	border-width: 10px;
	border-style: solid;
	border-color: purple;
	padding: 20px;
	margin: 20px;
}

border-style

取值：

dashed

dot-dash

dot-dot-dash

dotted

double

groove

inset

outset

ridge

solid

none

border-color

取值：Brush類型
作用：設置邊框的顏色

border-radius

取值：水平半徑 垂直半徑；

均是以像素爲單位，值必須帶px，第二個值是可選的，如果只有一個值，表示同時水平半徑和垂直半徑；如果有兩個值，則第一個代表水平半徑，第二個代表垂直半徑。

作用：設置邊框四個角的弧度
舉例：

QTextEdit
{
	border-width: 10px;
	border-style: solid;
	border-color: red;
	border-radius: 50px;
	padding: 20px;
	margin: 20px;
}

QTextEdit
{
	border-width: 10px;
	border-style: solid;
	border-color: red;
	border-radius: 50px 20px;
	padding: 20px;
	margin: 20px;
}

border-image

取值：這是一個連寫格式，下面給出具體的書寫格式，由於Qt對這個屬性支持不是很好，因此不建議使用，下面簡要介紹一下。
格式：CSS的連寫格式如下，每一項分別代表分開寫時的一個屬性

border-image: border-image-source    border-image-slice(file)     / border-image-width
/ border-image-outset border-image-repeat

其中，fill，border-image-width和border-image-outset在Qt中不被支持，而且Qt只支持連寫格式，因此在Qt中，我們實際的代碼格式是：

border-image: border-image-source    border-image-slice	border-image-repeat

下面簡略說一下每一項的含義：
border-image-source：圖片路徑，還是隻支持本地路徑和Qt資源文件路徑
border-image-slice：圖片切片，單位只能是像素值，因此數值不必帶單位px，它最多可以指定4個值，按照順序分別帶目標上右下左，最少指定一個值，左省略時和右相同，下省略時和上相同，右省略時和上相同；它們的含義是：距圖片頂部，右側，下部，左側分別按照指定的像素值進行切片，將圖片分成四個角（左上，右上，左下，右下）+ 四條邊（上右下左）+ 中間部分 = 共9個部分，在CSS中，如果指定了fill，則中間部分會覆蓋元素（控件）的背景，否則中間部分默認被省略。

border-image-repeat：最多兩個值最少一個值，第一個值表示水平方向，第二個值表示垂直方向。作用是指定邊框圖片的四條邊和四個角的平鋪方式，不包括中間部分，有三種取值，分別是stretch(默認)、round(均分平鋪)、repeat(平鋪)。stretch表示拉伸四條邊相應的切片圖片，來填補邊框的間隙；round是把四個角和四條便分成均等區域然後使用背景圖片切好能鋪滿整個邊框間隙，不能多也不能少，正好合適；repeat是做直接複製填滿空隙。
舉例：

QTextEdit
{
	border: 30px solid red;
	border-image: url(:/resource/border.png) 30 round;
	background-color: skyblue;
	background-image: url(:/resource/girl.png);
}

QTextEdit
{
	border: 30px solid red;
	border-image: url(:/resource/border.png) 30 stretch;
	background-color: skyblue;
	background-image: url(:/resource/girl.png);
}

QTextEdit
{
	border: 30px solid red;
	border-image: url(:/resource/border.png) 30 repeat;
	background-color: skyblue;
	background-image: url(:/resource/girl.png);
}

QTextEdit
{
	border: 30px solid red;
	border-image: url(:/resource/border.png) 30 repeat stretch;
	background-color: skyblue;
	background-image: url(:/resource/girl.png);
}

連寫格式

連寫格式1

border: width style color;

這種格式將四條邊框的寬度，風格，顏色全部設置爲一樣。
舉例：

QTextEdit
{
	border: 10px solid red;
	background-color: skyblue;
}

連寫格式2

border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;

這種格式設置指定方向的邊框的樣式，可以只設置一條邊。
舉例：

QTextEdit
{
	border-top: 10px solid red;
	background-color: skyblue;
}

連寫格式3

border-style: up right bottom left;
border-width: up right bottom left;
border-color: up right bottom left;

這種連寫格式是指定一種屬性，按照上右下左四個方向進行設置邊框。
其中，後三個可以省略，左省略則與右相同，下省略則與上相同，右省略則與上相同。
舉例：

QTextEdit
{
	border-style: solid dashed dotted double;
	border-color: red green blue purple;
	border-width: 5px 10px 15px 20px;
	background-color: skyblue;
}

QTextEdit
{
	border-style: solid dashed;
	border-color: red green blue;
	border-width: 10px;
	background-color: skyblue;
}

單寫格式

單寫格式指的是，對每條邊框的每個屬性分別進行設置，格式如下;

width	style	color
border-top-width	border-top-style	border-top-color
border-right-width	border-right-style	border-right-color
border-buttom-width	border-buttom-style	border-bottom-color
border-right-width	border-right-style	border-left-color