CSS3是現今網頁設計中不可缺少的一部分，其豐富的新特性使得網頁的設計變得更加靈活。其中，右邊欄伸縮也是CSS3中常用的功能之一。
.sidebar {
width: 250px;
height: 100%;
position: fixed;
top: 0;
right: 0;
background-color: #f2f2f2;
box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
transition: width 0.3s ease-in-out;
}
.sidebar:hover {
width: 350px;
}以上是一個簡單的右邊欄伸縮的CSS3代碼示例。其中，我們給
標簽添加了一個class名為“sidebar”，并且設置了其初始寬度為250px，作為右邊欄的初始寬度。此外，
position: fixed屬性可以使得右邊欄始終固定在頁面的右側，top: 0和right: 0屬性則可以使得右邊欄在頁面上的位置與屏幕的位置有固定的對應關系。我們還為右邊欄添加了一個鼠標懸停的效果，即當鼠標懸停在右邊欄上時，右邊欄的寬度會自動變為350px。這個效果通過transition: width 0.3s ease-in-out;屬性實現，使得右邊欄的寬度變化平滑且有節奏感。
如果我們在這個右邊欄中繼續添加一些內容，比如導航鏈接、搜索框、最近文章等等，那么這個右邊欄就可以進行更加復雜的設計和交互，為網頁的功能和體驗提升不少。
上一篇css px2rem
下一篇css3向下翻書的效果