在HTML中，框模型（Box Model）是指一個(gè)HTML元素的布局，包括邊框（Border）、填充（Padding）、內(nèi)容（Content）和外邊距（Margin）四個(gè)部分，這個(gè)模型對于CSS的布局與樣式起至關(guān)重要的作用。

CSS3為框模型帶來了很多新特性，其中最重要的是Box-sizing屬性。以前，CSS的框模型中，寬度和高度都只包括內(nèi)容，但現(xiàn)在我們可以通過設(shè)置Box-sizing來設(shè)置邊框或者填充等的大小，這樣元素的大小就包括了邊框或者填充，大大增加了設(shè)計(jì)的靈活性。

.box{
width: 200px;
height: 100px;
border: 10px solid red;
padding: 20px;
box-sizing: border-box; 
}

上面的代碼中，我們設(shè)置了一個(gè)元素的寬度為200像素，高度為100像素，邊框?yàn)?0像素的紅色，填充為20像素。接下來我們使用box-sizing屬性來設(shè)置邊框和填充都被包含在元素的大小中。

除了Box-sizing以外，CSS3還引入了一些新的屬性和偽元素，比如Outline-offset和::before偽元素等，這些新的屬性和偽元素大大增強(qiáng)了框模型的表現(xiàn)和設(shè)計(jì)能力。

.box{
width: 100px;
height: 100px;
border: 2px solid #ccc;
outline: 2px solid blue;
outline-offset: -10px;
position: relative; 
}
.box::before{
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
background-color: blue; 
}

在上面的代碼中，我們使用了Outline-offset屬性來讓元素的邊框向外擴(kuò)展10像素，同時(shí)使用了::before偽元素來給元素添加一個(gè)藍(lán)色的小塊作為背景。這些新的特性讓我們可以更加靈活地設(shè)計(jì)和布局我們的頁面。