CSS3是前端開發中常用的一種技術，在網頁開發中，它除了可以進行樣式的設置外，還可以實現很多非常有用的功能。其中，下拉加載內容就是非常實用的一個功能，它可以讓網頁加載更快、更方便地呈現內容。

<div class="container">
<ul id="list">
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
<li>內容4</li>
<li>內容5</li>
<li>內容6</li>
<li>內容7</li>
<li>內容8</li>
<li>內容9</li>
<li>內容10</li>
</ul>
<div id="loadmore" class="loadmore">
<span>加載更多…</span>
</div>
</div>

上面的代碼可以實現一個簡單的下拉加載內容的效果。其中，container是一個父容器，list是一個列表，loadmore是一個裝載更多的容器，最后的…可以用省略號或其它符號取代，用于表示“加載中”狀態。

/*初始化容器的樣式*/
.container {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
/*隱藏“loadmore”容器*/
.loadmore {
display: none;
text-align: center;
padding: 10px 0;
font-size: 14px;
color: #888;
}
/*懸浮“loadmore”容器的樣式*/
.loadmore.visible {
display: block;
}

上面代碼中的CSS樣式設置了容器的屬性，包括了寬度、高度、滾動條、列表的邊距和各個文本的樣式。loadmore容器的樣式會在下拉到一定位置時顯示出來，方便用戶點擊選擇。

/*監聽滾動事件*/
container.onscroll = function() {
var scrollTop = container.scrollTop,
scrollHeight = container.scrollHeight,
clientHeight = container.clientHeight;
if (scrollTop + clientHeight == scrollHeight) {
/*觸發加載更多的事件*/
loadMore();
}
}
/*加載更多的方法*/
function loadMore() {
var ul = document.querySelector('#list');
var html = '';
for (var i = 11; i < 21; i++) {
html += '<li>內容' + i + '</li>';
}
ul.innerHTML += html;
}

上面代碼中是下拉加載內容的核心部分。其中，oncroll事件用于監聽滾動事件，當頁面滾動到底部時，觸發加載更多的功能；loadMore()方法則用于實現在列表中添加更多的內容，這里是添加從11到20的內容。最后，調用innerHTML函數將新的內容添加到列表中。

有了上面的代碼，就可以非常方便地實現下拉加載內容的功能，提供更好的用戶體驗，讓網站的加載速度更快、更流暢。