08.圓角樣式和漸變色樣式

08.圓角樣式和漸變色樣式

1.圓角樣式

圓角樣式：W3C制定出來使默認顯示爲矩形的塊元素展示一個弧形邊緣的樣式。

瀏覽器默認每一個塊元素都是一個矩形區域，那麼當我們給一個塊元素設置了border-radius之後瀏覽器到底做了些什麼才讓一個矩形區域出現一個圓角效果呢？

boder-ridus：給矩形區域的四個角設置一個圓，而瀏覽器會將多餘的部分去掉，從而顯示的過程爲：

圓角樣式如同margin一樣，可以單獨對每個邊角的小圓設置一個不一樣的半徑值，這樣我們就可以利用圓角樣式設計出各式各樣的圖形出來。

四個屬性值
Border-radius：50px 30px 80px 150px; 兩個屬性值：左上 右上 右下 左下。

兩個屬性值
Border-radius：50px 130px; 兩個屬性值：左上與右下，左下與右上。

三個屬性值
Border-radius：50px 130px 150px; 兩個屬性值：左上 右上與左下 右下。

圓角樣式border-radius的橢圓設計

boder-ridus： 橫軸值/縱軸值。由一個反斜槓組成。

注意：

若矩形的邊框和高度分別爲200px，200px，而設置的圓半徑大於100px。如半徑爲200px，則效果圖如下：

另外，boder-ridus：的值還可以是百分制，如width:1000px;
border-radius:50% 50%; 橫軸半徑爲50%，縱軸半徑爲50%

2.漸變色

漸變色：所謂漸變色，一般是指在兩個及以上的顏色之間呈現一種平滑的過渡效果，該效果是矢量效果，不會因爲頁面的放大而出現模糊的情況，CSS3中定義了兩種漸變類型，一種爲線性漸變，一種爲徑向漸變，還有一種目前應用不廣但是很有前途的角向漸變。

線性漸變：linear-gradient(to bottom，red 0%,blue 100%)方向不寫默認是從上往下。方向也可以是度數，0deg

其實我們完全可以把給元素設置顏色理解爲給一堵牆刷一個油漆，這個油漆怎麼刷完全是由戶主自己決定的，我們傳統的方法要麼是給牆刷一個顏色的油漆，要麼是給牆上貼一張海報（background-image），而漸變色則是給牆上刷多種顏色。

徑向變色:徑向漸變和線性漸變的唯一不同就是添加顏色的方向，徑向漸變類似畫同心圓，一層層的往外面畫圈圈。

radial-gradient(purple 0%, blue 100%).

漸變色用於背景時，是以背景圖片的形式展示的！！！！！！
所以可以使用背景圖片的所有樣式特性，如大小，位置，基點，剪切等

重複漸變色

repeating-linear-gradient() 和 repeating-radial-gradient()。
它們的工作方式跟前兩者類似，只有一點不同：色標是無限循環重複的，直到填滿整個背景。

-gradient()。
它們的工作方式跟前兩者類似，只有一點不同：色標是無限循環重複的，直到填滿整個背景。