CSS一些新特性的總結篇

2021-08-30 21:46:41 字數 1548 閱讀 6665

本週學習了一些css3的新特性 在此做出總結記錄。

設定元素的背景(背景或顏色)是否延伸到邊框下面

一般設定背景只會存在於content和padding這條屬性可以將背景衍生至邊框。

引數值border-box:

背景延伸到邊框外沿(但是在邊框之下)。

padding-box:

邊框下面沒有背景,即背景延伸到內邊距外沿。

content-box:

背景裁剪到內容區 (content-box) 外沿。

//html

border-box

padding-box

content-box

//css

div .border

.padding

.content

給邊框新增陰影

注:可以用逗號分隔而生成多個陰影

通過偏移量可以設計出很多好看的圖案。

引數值h-shadow:x軸方向的偏移量

v-shadow:y軸方向的偏移量

blur:模糊距離

spread:陰影尺寸

color:陰影的顏色 預設為透明的

inset:內陰影和外陰影

//html

//css

div

outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。區別於邊框。

注:輪廓線不會佔據空間。

引數值:

//html

//css

div

設定outline屬性的偏移量。當出現複數的時候會有神奇的事情就像下面的例子

(在調整屬性的時候可以多嘗試不同的正負數值)

引數值

//html 用outline-offset屬性畫乙個小圖示

//css

.add

ps:outline和box-shadow是很神奇的屬性 合理的組合能夠畫出很多好看的的影象和簡單的實現某些看起來很複雜的影象。

參考鏈結

這是乙個函式

建立乙個表示兩種或多種顏色線性漸變。

引數值

//html

//css

.test

修改css視覺格式模型的座標空間

屬性:元素可以被旋轉 轉換 縮放 傾斜

引數值參考:

//html

//css

.test

.test2

.test3

建立乙個只有元素的部分區域可以顯示的剪下區域,類似於ps裡面的剪下功能。

ps:這個屬性ie 不支援引數

4個引數分別代表座標

//圓角效果

//html

//css

.test

css3的一些新特性

background rgba 254,255,200,0.75 例如上面 所示,前三個引數分別是分別是 r g b 三原色,範圍是 0 255。第四個引數是背景透明度,範圍是 0 1,如 0.5 代表透明度 50 這個屬性使我們在瀏覽器中也可以做到像 win7 一樣的半透明玻璃效果。css3圓角示...

css3的一些新特性

background rgba 254,255,200,0.75 例如上面 所示,前三個引數分別是分別是 r g b 三原色,範圍是 0 255。第四個引數是背景透明度,範圍是 0 1,如 0.5 代表透明度 50 這個屬性使我們在瀏覽器中也可以做到像 win7 一樣的半透明玻璃效果。css3圓角示...

CSS3的一些新特性

1.屬性選擇器 選擇符簡介 e att 選擇具有att屬性的e元素 e att val 選擇具有att屬性且屬性值等於val的e元素 e att val 匹配具有att屬性,且值以val開頭的e元素 e att val 匹配具有att屬性,且值以val結尾的e元素 e att val 匹配具有att...