### 自由縮放屬性resize
> `resize`允許用戶通過拖動的方式來修改元素的尺寸來改變元素的大小。到目前為止，可以使用overflow屬性的任何容器元素。
`resize`語法:
```
resize: none | both | horizontal | vertical | inherit
```
取值說明：
屬性值|取值說明
---|---
none|用戶不能拖動元素修改尺寸大小
both|用戶可以拖動元素，同時修改元素的寬度和高度
horizontal|用戶可以拖動元素，僅可以修改元素的寬度，但不能修改元素的高度
vertical|用戶可以拖動元素，僅可以修改元素的高度，但不能修改元素的寬度
inherit|繼承父元素的resize屬性值
例如：通過`resize`屬性，讓文本域可以沿水平方向拖大。代碼為：
```css
textarea {
-webkit-resize: horizontal;
-moz-resize: horizontal;
-o-resize: horizontal;
-ms-resize: horizontal;
resize: horizontal;
}
```
### CSS3外輪廓屬性
> 外輪廓`outline`在頁面中呈現的效果和邊框`border`呈現的效果極其相似，但和元素邊框`border`完全不同，外輪廓線不占用網頁布局空間，不一定是矩形，外輪廓是屬于一種動態樣式，只有元素獲取到焦點或者被激活時呈現。
`outline`屬性早在CSS2中就出現了，主要是用來在元素周圍繪制一條輪廓線，可以起到突出元素的作用。但是并未得到各主流瀏覽器的廣泛支持，在CSS3中對`outline`作了一定的擴展，在以前的基礎上增加新特性。`outline`屬性的基本語法如下：
```css
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
```
從語法中可以看出`outline`和`border`邊框屬性的使用方法極其類似。`outline-color`相當于`border-color`、`outline-style`相當于`border-style`，而`outline-width`相當于`border-width`，只不過CSS3給`outline`屬性增加了一個`outline-offset`屬性，其取值說明如下
屬性值|屬性值說明
---|---
outline-color|定義輪廓線的顏色，屬性值為CSS重定義的顏色值，在實際應用中，可以將此參數省略，省略時此參數的默認值為黑色
outline-style|定義輪廓線的樣式，屬性值為CSS重定義的樣式，在實際應用中，可以將此參數省略，省略此參數的默認值為none，省略后不對該輪廓線進行任何繪制
outline-width|定義輪廓線的寬度，屬性值可以為一個寬度值，在實際應用中，可以將此參數省略，省略時此參數的默認值為medium，表示繪制中等寬度的輪廓線
outline-offset|定義輪廓邊框的偏移位置的數值，此值可以取負數值，當此參數的值為正數值，表示輪廓邊框向外偏移多個像素；當次參數的值為負數值，表示輪廓邊框向內偏移多少個像素
inherit|元素繼承父元素的outline效果
### CSS生成內容
> 在Web中插入內容，在CSS2.1時代依靠的是JavaScript來實現。但進入CSS3進代之后我們可以通過CSS3的偽類`:before`，`:after`和CSS3的偽元素`::before`、`::after`來實現，其關鍵是依靠CSS3中的`content`屬性來實現。不過這個屬性對于img和input元素不起作用。
`content`配合CSS的偽類或者偽元素，一般可以做以下四件事情：
功能|功能說明
---|---
none|不生成任何內容
attr|插入標簽屬性值
url|使用指定的絕對或相對地址插入一個外部資源(圖像、聲頻、視頻或瀏覽器支持的其他任何資源)
string|插入字符串
實例展示：
在CSS中有一種清除浮動的方法叫`clearfix`。而這個`clearfix`方法就中就使用了`content`，只不過只是在這里插入了一個空格
```css
.clearfix:before,
.clearfix:after {
content:'';
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
```
上面這個示例是最常見的，也是最簡單的，我們再來看一個插入元素屬性值的方法。
假設我們有一個元素：`<a href="##" title="我是一個title屬性值，我插在你的后面">我是元素</a>`
可以通過`:after`和`content:attr(title)`將元素的`title`值插入到元素內容`我是元素`之后：
```css
a:after {
content:attr(title);
color:#f00;
}
```
