CSS3中間向兩邊漸變是指在元素的中間部分呈現(xiàn)出一種顏色漸變，而兩側(cè)則是另一種顏色的效果。這種效果通常用于設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)產(chǎn)生視覺(jué)沖擊力。

/*定義漸變*/
background: linear-gradient(to left, #ffffff 0%, #000000 50%, #ffffff 100%);
/*漸變方向?yàn)閺挠业阶螅_(kāi)始顏色為白色，中部為黑色，結(jié)束顏色為白色。*/
/*定義寬高*/
width: 200px;
height: 200px;
/*定義背景*/
background-size: 200% 100%;
background-position: right;
transition: all 0.8s ease;
/*漸變方向?yàn)樗剑较驈挠蚁蜃蟆u變寬度是元素寬度的兩倍，即200*2 = 400像素。背景圖片的位置初始化為最右邊，過(guò)渡效果為0.8秒，ease為漸變函數(shù)。*/
/*鼠標(biāo)懸停*/
:hover {
background-position: left;
}
/*鼠標(biāo)懸停時(shí)，將背景圖片位置設(shè)置為最左邊，即可滿(mǎn)足中間向兩邊漸變的效果。*/

以上CSS3代碼可以用來(lái)實(shí)現(xiàn)中間向兩邊漸變的效果。通過(guò)設(shè)置背景漸變的顏色和位置，以及鼠標(biāo)懸停時(shí)背景位置的改變，可以讓頁(yè)面呈現(xiàn)出非常炫酷的效果，使得頁(yè)面更加具有視覺(jué)沖擊力。