邊框

• border-radius ：用于創建圓角邊框。
• 語法 ：?border-radius：?n px? （半徑為n的圓的弧度）?

注意：可以有多個n值。

四個值:?第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。（左上角開始順時針排）

三個值:?第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角。

兩個值:?第一個值為左上角與右下角，第二個值為右上角與左下角（左上角開始對角）

一個值：?四個圓角值相同

?

單個圓角邊框創建語法：border-*-*-radius? ：n px

例如：border-top-right-radius ：10px ? ?表示右上角的圓角弧度為10px

?

盒陰影? ?（所有的顏色都可以用rgb（）或者rgba（）表示）

• box-shadow ：用于添加陰影。
• 語法：box-shadow：h-shadow v-shadow blur spread color?inset;
  • h-shadow：水平陰影的位置。
  • v-shadow：垂直陰影的位置。
  • blur：模糊的距離。（可選）
  • spread：陰影大小。（可選，默認為0）
  • color：陰影顏色。（可選，默認黑色）
  • inset：內側陰影（可選，默認為外側陰影）

?

邊界圖片

• border-image：使用圖像創建一個邊框。
  
• 語法：border-image: source slice width outset repeat|initial|inherit;（不設置值系統會使用默認值）
  • source：圖片路徑。（url（。。。））
  • slice：圖像邊界向內偏移。
  • width：圖像邊界的寬度。
  • outset：用于指定在邊框外部繪制的量。
  • repeat：用于設置圖像邊界是否應重復（repeat）、拉伸（stretch）或鋪滿（round）。

?

背景

• background：設置背景
• 語法： background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

注意：

?用逗號隔開每組 background 的縮寫值；

?如果有 size 值，需要緊跟 position 并且用 "/" 隔開；

?如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值。

?background-color 只能設置一個。?

• background-image：設置背景圖片（可設置多個背景圖片，用逗號隔開）
  • 例：background:url(路徑) right top not-repeat，url(路徑)?letf?top not-repeat;? ?(分別設置一張背景圖在右上角和左上角)
• background-position：設置背景圖片開始坐標（可以用像素,百分比,和left?top（具體位置）三種方式設置賦值）
• background-repeat：設置背景圖是否平鋪。（repeatX/repeatY/no-repeat）
• background-size：設置背景圖的大小（可以用像素或百分比）
• background-origin：設置背景圖的位置區域（border-box/padding-box/content-box）
• background-clip:設置背景從指定位置開始繪制，（在原來的基礎上剪切背景圖）（border-box/padding-box/content-box）
• ? ? ? ? ? ? ??

?

?

?

?漸變? ? ?

漸變：在兩個或多個指定的顏色之間顯示平穩的過渡。

瀏覽器前綴：

• -webkit-? ? ? Chrome、Safari
• -moz-? ? ? ? ?Firefox
• -o-? ? ? ? ? ? ? Opera

線性漸變（Linear Gradients）

• 語法（方向）：background: linear-gradient(direction,?color1,?color2, ...);? ? ? ? （默認方向是從上到下）
• 例：background：linear-gradient(red,blue)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 紅色（上）漸變成藍色（下）
• background: linear-gradient(to left top?,?color1,?color2, ...)? ? ? ? ? ? ? ? ??漸變方向：左上角到右下角? 如果加了瀏覽器前綴則不用加to

?

• 語法（角度）：background: linear-gradient(angle,?color-stop1,?color-stop2);? ? ?
• 0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。
• 
  
• 注意：很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標準，即 0deg 將創建一個從左到右的漸變，90deg 將創建一個從下到上的漸變。（即在原圖的基礎上逆時針旋轉90度）

?

• 重復線性漸變
• 語法：background：repeating-linear-gradient（略）

?

徑向漸變（Radial Gradients）

• 語法：background: radial-gradient(center, shape size, start-color, ..., last-color)；

  ?漸變的中心是 center（表示在中心點，可用像素或百分比表示），漸變的形狀是?shape（默認橢圓形）circle（圓），漸變的大小是size。

• 可以為顏色增加百分比，表示顏色占的比例

　　　?background: radial-gradient(red 5%, green 15%, blue 60%);

• size 參數定義了漸變的大小。它可以是以下四個值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

文本效果

• 語法：text-shadow:?h-shadow v-shadow blur color;?文本陰影
• h-shadow:水平方向陰影的偏移。必需
• v-shasow:垂直方向陰影的偏移。必需
• blur:模糊的距離。可選
• color：陰影顏色。默認黑色

?

• 語法：text-overflow: clip|ellipsis|string;? ?文本溢出（需設置white-space:nowrap和overflow：hidden兩個屬性）
• clip：溢出的部分裁切掉。
• ellipsis：溢出部分用省略號代替。
• string：溢出部分用指定字符串代替。

?

2D轉換

• 語法： transform：函數
  • translate(n px，m px)? ?水平平移n px，垂直平移m px? ? ? ??
  • rotate(n deg)? ? ? ? ? ? ? ? ?順時針旋轉n度
  • scale(n，m)? ? ? ? ? ? ? ? ? ?width增大（縮小）n倍，height增大（縮小）m倍 ? ? ? ?
  • skew(n deg,m deg)? ? ? ?x軸傾斜n度，y軸傾斜m度
  • matrix()? ? ?

?

?

轉載于:https://www.cnblogs.com/NExt-O/p/10140923.html

總結

以上是生活随笔為你收集整理的CSS3 总结（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。