問題描述

定義一個(gè)p通過漸變渲染生成一種條紋效果

.test { margin: 5em; width: 10em; height: 10em; background: linear-gradient(orange 50%, pink 50%);}

然后旋轉(zhuǎn)45度出現(xiàn)的效果是下圖那樣

background: linear-gradient(45deg, orange 50%, pink 50%);

我想請(qǐng)問 本來的45度是順時(shí)針旋轉(zhuǎn)的 出現(xiàn)的效果不應(yīng)該是下面這樣么

為什么會(huì)這樣 是我所理解的旋轉(zhuǎn)有錯(cuò)誤么

問題解答

你的理解確實(shí)存在問題。background: linear-gradient(45deg, orange 50%, pink 50%); 這里45deg的含義：以豎直向上為0°起點(diǎn)，順時(shí)針旋轉(zhuǎn)45°。 所以你認(rèn)為正確的那個(gè)圖，其實(shí)是旋轉(zhuǎn)了225°得來的。（理解好0°在哪里、默認(rèn)值是180°就ok了）