CSS3常見屬性（上篇）

一、CSS3邊框

1、border-radius（圓角）

div{  
 border:2px solid;
 border-radius:25px;
}

2、box-shadow（陰影）

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow必需。水平陰影的位置。允許負值。
v-shadow必需。垂直陰影的位置。允許負值。
blur可選。模糊距離。
spread可選。陰影的尺寸。
color可選。陰影的顏色。請參閱 CSS 顏色值。
inset可選。將外部陰影 (outset) 改爲內部陰影。

div{
 box-shadow: 10px 10px 5px #888888;
}

3、border-image（邊界圖片）

border-image: source slice width outset repeat|initial|inherit;

div{
 border-image:url(border.png) 30 30 round;
}

border-image-source用於指定要用於繪製邊框的圖像的位置
border-image-slice圖像邊界向內偏移
border-image-width 圖像邊界的寬度
border-image-outset用於指定在邊框外部繪製 border-image-area 的量
border-image-repeat用於設置圖像邊界是否應重複（repeat）、拉伸（stretch）或鋪滿（round）。

二、CSS3圓角

border-radius - 指定每個圓角.

四個值: 第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角。border-radius: 15px 50px 30px 5px:
三個值: 第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角。border-radius: 15px 50px 30px:
兩個值: 第一個值爲左上角與右下角，第二個值爲右上角與左下角。border-radius: 15px 50px:
一個值：四個圓角值相同。

三、CSS3背景

1、background-image（添加背景圖片）

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

2、background-size（指定背景圖像的大小）

background-size: length|percentage|cover|contain;

length設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置爲 auto(自動)
percentage將計算相對於背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置爲"auto(自動)"
cover此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小。
contain此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。

3、background-origin（指定了背景圖像的位置區域）

background-origin: padding-box|border-box|content-box;

padding-box:背景圖像填充框的相對位置
border-box:背景圖像邊界框的相對位置
content-box:背景圖像的相對位置的內容框

4、background-clip（從指定位置開始繪製）

background-clip: border-box|padding-box|content-box;

border-box : 默認值。背景繪製在邊框方框內（剪切成邊框方框）。
padding-box:背景繪製在襯距方框內（剪切成襯距方框）。
content-box : 背景繪製在內容方框內（剪切成內容方框）。

5、 background-repeat 屬性

repeat背景圖像將向垂直和水平方向重複。這是默認
repeat-x只有水平位置會重複背景圖像
repeat-y只有垂直位置會重複背景圖像
no-repeatbackground-image不會重複
inherit指定background-repea屬性設置應該從父元素繼承

四、CSS3漸變

1、線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

線性漸變 - 從左到右

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

線性漸變 - 對角

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度

語法

background-image: linear-gradient(angle, color-stop1, color-stop2);

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

使用多個顏色結點

#grad {
  background-image: linear-gradient(red, yellow, green);
}

使用透明度

rgba() 函數來定義顏色結點。
rgba() 函數中的最後一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重複的線性漸變repeating-linear-gradient() 函數用於重複線性漸變

#grad {
  /* 標準的語法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

2、徑向漸變（Radial Gradients）- 由它們的中心定義

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

徑向漸變 - 顏色結點均勻分佈（默認情況下）

#grad {
  background-image: radial-gradient(red, yellow, green);
}

徑向漸變 - 顏色結點不均勻分佈

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

設置形狀
shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

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

closest-side、farthest-side、closest-corner、farthest-corner

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

重複的徑向漸變
repeating-radial-gradient() 函數用於重複徑向漸變：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

五、CSS3文本效果

1、text-shadow（文本陰影）
指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色。

h1{
   text-shadow: 5px 5px 5px #FF0000;
}

2、box-shadow（盒子陰影）

div {
    box-shadow: 10px 10px 5px #888888;
}

也可以在 ::before 和 ::after 兩個僞元素中添加陰影效果。

3、text-overflow（文本溢出屬性指定應向用戶如何顯示溢出內容）

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
} 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

clip 修剪文本。
ellipsis 顯示省略符號來代表被修剪的文本。
string 使用給定的字符串來代表被修剪的文本。

4、word-wrap（換行）

p {word-wrap:break-word;}

normal 只在允許的斷字點換行（瀏覽器保持默認處理）。
break-word 在長單詞或 URL 地址內部進行換行。

5、word-break（單詞拆分換行）

p.test1 {
    word-break: keep-all;
} 
p.test2 {
    word-break: break-all;
}

normal 使用瀏覽器默認的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。

6、文本其他屬性

hanging-punctuation 規定標點字符是否位於線框之外。
（目前瀏覽器都不支持）

hanging-punctuation: none|first|last|allow-end|force-end;

punctuation-trim 規定是否對標點字符進行修剪。
（任何瀏覽器都不支持）

punctuation-trim: none|start|end|allow-end|adjacent;

text-align-last 設置如何對齊最後一行或緊挨着強制換行符之前的行。

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

text-emphasis 向元素的文本應用重點標記以及重點標記的前景色。
（目前瀏覽器都不支持）

text-emphasis: text-emphasis-style text-emphasis-color;

text-justify 規定當 text-align 設置爲"justify" 時所使用的對齊方法。
（只有IE5.5支持）

text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

text-outline 規定文本的輪廓。
（目前瀏覽器都不支持）

text-outline: thickness blur color;

六、CSS3字體

使用需要的字體

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
} 
div{
    font-family:myFirstFont;
}
</style>

font-family name 必需。規定字體的名稱。
src URL 必需。定義字體文件的 URL。
font-stretch 可選。定義如何拉伸字體。默認是 “normal”。值包含有（ Normal、condensed、ultra-condensed、extra-condensed、semi-condensed、expanded、semi-expanded、extra-expanded、ultra-expanded ）
font-style 可選。定義字體的樣式。默認是 “normal”。值包含有（Normal、italic、oblique）
font-weight

七、CSS3 2D 3D轉換

1、transform 適用2D或 3D轉換的元素

transform: none|transform-functions;

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。
rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數.
skew() 方法包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數爲空，則默認爲0，參數爲負表示向相反方向傾斜。

2、transform-origin允許您更改轉化元素位置

transform-origin: x-axis y-axis z-axis;

x-axis(left、center、right、length、%）
y-axis（top、center、bottom、length、%）
z-axis（length）

CSS3常見屬性（上篇）

利用HTML5/CSS3寫一個網站佈局

ES6:Class與繼承

Vue-cli安裝與配置

React.js下載與使用

chrome安裝vue-devtool插件

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結