CSS3 新特性應用總結

標籤：計算   隨機   定義   方向   函數   背景   repeat   stop   jpg   

一、半透明邊框

• css3最好用hsla，而不是rgba，hsla是：h：顏色值(0~360)；s：飽合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1)
• background-clip：裁剪背景顏色，預設為border-box(背景顏色擴散到border）；padding-box（背景顏色擴散到padding）；content-box（背景顏色擴充到content)
• 範例程式碼：

width:200px;height:200px;background: rebeccapurple;border: 10px solid hsla(300, 0%, 50%, 0.5);     background-clip: padding-box; //去掉和添加上此項可以看出效果

 

二、多重邊框實現

• box-shadow：設定或檢索對象陰影，格式：box-shadow: none | <length>{2,4} && color? | inset?
  • length<1>: 水平位移，可負值
  • length<2>: 垂直位移，可負值
  • length< 3 >: 陰影模糊值，不可負值
  • length<4>：外延長度，可負值
  • <color>：陰影顏色
  • inset：表示為內陰影，為空白表示外陰影
  • 可以設定多組效果，多組之間用逗號隔開（利用可box-shadow可重疊特性來設定多重邊框，但邊框樣式不可做也條紋、虛線之類的）
  • 如果要設定檢索文本陰影，用text-shadow屬性

 

• outline實現兩個邊框（只能實現兩重邊框，但邊框樣式靈活）

 

三、背景的定位

• background-position：背景定位，值說明如下
  • center，left，top，bottom，right等都是表示背景從何地開始顯示，如果設定重複平鋪，會有不同的效果
  • 值可是數值或百分比：background-position: right 20px bottom 30px;
• background-origin：背景圖片的定位參數，三值context-box，padding-box，border-box等。
• clac()計算寬度的函數
• 範例程式碼如下：

background-image: url(‘../img/bck.png‘);background-repeat: no-repeat;background-size: 40px 40px;width:200px;height:200px;margin-top:10px;border: 5px solid red;--background-position: right 0px bottom 0px;background-origin: content-box;background-position: calc(100% - 50px);padding: 10px;

 

 

四、多重圓角邊框

• box-shadow：他的圓角是會跟隨border-radius走的，而outline且不會。
• 最小陰影(box-shadow)計算公式為：勾股定理，設定陰影時應該大於此值
• 範例程式碼：

margin: 10px auto;width: 10em;height: 8em;background: tan;border-radius: .8em;padding: 1em;box-shadow: 0 0 0 .6em #655;outline: .6em solid #556;

 五 、條紋背景

• 利用background為linear-gradient函數實現，linear-gradient取值如下：
  • <angle>：角度，漸層的方向
  • to left right top bottom
  • color：指定顏色
  • color-stop：指定漸層的起止顏色
  • length：用長度值指定起止色的位置，不可為負值
  • percentage：用百分比指定起止色的位置
  • 文法格式：linear-gradient([[<angle>|to <side-to-corner>],]? <color-stop>[,<color-stop>]+)
  • side-to-corner：[left|right] || [top||bottom]
  • color-stop: <color>[<length>|<percentage>]?
• 範例程式碼(斜角條紋)：

background: linear-gradient( 40deg, #fb3 5px, #58a 15px);width: 200px;height: 100px;margin: 0px auto;background-size: 30px 30px;

• 當linear-gradient添加多組值的時候，前面的值會覆蓋後面的，如下代碼：

background-image:linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 0)

說明:linear-gradient(45deg, transparent 75%, #bbb 0)的資訊會被linear-gradient(45deg, #bbb 25%, transparent 0) 覆蓋。

• 範例程式碼：

width: 200px;            height: 200px;            background: #eee;            background-image: linear-gradient(45deg, #bbb 25%, transparent 0),            linear-gradient(45deg, transparent 75%, #bbb 0),            linear-gradient(45deg, #bbb 25%, transparent 0),            linear-gradient(45deg, transparent 75%, #bbb 0);            background-position: 0px 0px, 12.5px 12.5px, 12.5px 12.5px, 25px 25px;            background-size: 25px 25px;

代碼解釋:

* image與position一對一的相互參照；image實現圖形，position實現定位* 每個圖形都是一個小的三角形，兩個三角形相互拼接成一個正方形，然後近一步定位即可。* 注意角度的旋轉，他是順時針的。

 

• linear-gradient還可以合并寫法，也就是定義一個角度，後面跟隨多組顏色值

linear-gradient(45deg, #bbb 25%, transparent 0, \transparent 50%, #bbb 0, transparent 75%, #bbb 0)

• css可以用\（反斜線）進行換行，如上
• 不規則條紋
  • 主要利用background-size多組值實現，第組值按照自定的間距進行平鋪
  • 最與數學中的最大公約倍數有關聯，他們會以最大分倍數的寬度重複, 如果讓他看上去更隨機就需要避開此條規則
  • 範例程式碼：

.wrap{            width: 600px;            height: 100px;            background: hsl(20, 40%, 90%);            background-image:                 linear-gradient(90deg,#fb3 10px, transparent 0),                linear-gradient(90deg,#ab4 20px, transparent 0),                linear-gradient(90deg,#655 30px, transparent 0);            background-size: 40px 100%, 60px 100%, 80px 100%;        }        .wrap-thr{            margin-top: 5px;            width: 600px;            height: 100px;            background: hsl(20, 40%, 90%);            background-image:                 linear-gradient(90deg,#fb3 10px, transparent 0);            background-size: 40px 100%;        }        .wrap-one{            margin-top: 5px;            width: 600px;            height: 100px;            background: hsl(20, 40%, 90%);            background-image:linear-gradient(90deg,#ab4 20px, transparent 0);            background-size: 60px 100%;        }        .wrap-two{            margin-top: 5px;            width: 600px;            height: 100px;            background: hsl(20, 40%, 90%);            background-image:linear-gradient(90deg,#655 30px, transparent 0);            background-size: 80px 100%;        }

 

• 複雜邊框背景
• 方案一 利用border-image實現，border-image使用的是九宮格伸縮法
• 方案二 利用背景多層覆蓋原理實現，先實現多層有顏色的背景，最後加上一層白色的。

.wrap{            width: 200px;            height: 50px;            padding: 1em;            border: 1em solid transparent;            background: linear-gradient(white,white) padding-box,            repeating-linear-gradient(-45deg,red 0, red 12.5%,             \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;        }        .wrap-one{            margin-top: 5px;            width: 200px;            height: 50px;            padding: 1em;            border: 1em solid transparent;            background:             repeating-linear-gradient(-45deg,            \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;        }         .wrap-two{            margin-top: 5px;            width: 200px;            height: 50px;            padding: 1em;            border: 1em solid transparent;            background:              repeating-linear-gradient(-45deg, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;        }        .wrap-thr{            margin-top: 5px;            width: 200px;            height: 50px;            padding: 1em;            border: 1em solid transparent;            background:             repeating-linear-gradient(-45deg,transparent 0, red 50%) 0 / 5em 5em;        }

 

CSS3 新特性應用總結