CSS隨機排列 boder-radius

標籤：font   bottom   ima   半徑   原理   otto   一點   適用於   style   

當你注意到一個有辨識度的特徵在以固定的規律迴圈重複時，那它試圖營造的自然隨機性就會立刻崩塌。

CSS中使用質數，從而增加了隨機的真實感。這個被alex walker定名為“蟬原則”。他最先提出了通過質數來著鞥家隨機真實性的想法。這個方法不僅適用於背景，還可以用於其他涉及有規律重複的情況。

 

border-image的原理基本上就是九宮格伸縮法：把圖片切割成九塊，然後把它們應用到元素邊框相應地邊和角。

 

當任意兩個相鄰圓角的半徑之和超過border box的尺寸時，使用者代理程式必須按比例減小各個邊框半徑所使用的值，直到它們不會相互重疊為止。

boder-radius可以單獨指定水平和垂直半徑，只要用一個斜杠（/）分隔這兩個值即可。這個特性允許我們在拐角處建立橢圓圓角。一個容器設定了不相等的水平和垂直border-radius；拐角處的弧線現在呈現出橢圓的形狀，這個橢圓的水平和垂直半徑就是我們為border-radius指定的值。

boder-radius這個屬性不僅可以接受長度值，還可以接受百分比值。這個百分比值會基於元素的尺寸進行解析，即寬度用於水平半徑的解析，而高度用於垂直半徑的解析。

我們可以為元素的每個角指定不同的值，而且還有兩個方法可以做到這一點。第一種方法就是使用它所對應的各個展開式屬性：border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radisu。

不過我們可以一次性提供用空格分開的多個值。如果我們傳給它四個值，這四個值就分別從左上方順時針順序應用到元素的各個拐角。如果我們提供的值少於四個，則它們會以CSS的常規方式重複，三個值，意味著第四個值和第二個值相同；如果只有兩個值，以為13，24相同。

CSS隨機排列 boder-radius