前端-css小技巧

背景和邊框

1. 半透明邊框

背景知識：rgba/hsla，在rgb/hsl的基礎上增加了Alpha通道,用於設置顏色的不透明度（就是能透過多少背景）

• rgba接受四個數值，即rgba(red, green, blue,a),rgb可以為數值（0 ~ 255），也可以為百分比（0 ~ 100%），a表示不透明度(0~1),1為完全不透明，0表示完全透明。
• rgba(0,255,0,1) 表示純綠色，完全不透明
• rgba(100%,0,0，0.5)表示純紅色，半透明
• hsla(色相， 飽和度%， 亮度%，透明度)，格式為hsla(0, 0%,0%,0)
  hsla的第一個值表示色相，也就是一個實際的顏色，比如紅色或者綠色。所有的顏色繞色相環（色輪）一周，色相值以圓周上的度數表示。
• 飽和度設定有多少顏色，灰色的飽和度低，而強烈的色彩飽和度高
• 亮度設定顏色的明暗，0%就是黑色，100%就是白色

實踐 ： 設計一個帶有半透明邊框的容器，可能很多人會這樣寫

border:10px solid hsla(0,0%,100%,0.5); background:white;

但實際情況，半透明的邊框並不會顯示出來

解決方案

出現這種情況是，背景會默認延伸到邊框所在的區域下面。可以使用background-clip屬性來處理。

background-clip 設置元素的背景（背景圖片或顏色）是否延伸到邊框下面，有三個可選值，默認為border-box

• border-box
  背景延伸到邊框外沿（但是在邊框之下）。
• padding-box
  邊框下面沒有背景，即背景延伸到內邊距外沿。
• content-box
  背景裁剪到內容區 (content-box) 外沿。

可以這樣寫

border: 10px solid hsla(0, 0%, 100%, 0.5); background: white; background-clip: padding-box;

2. 多重邊框

背景知識 ：box-shadow 描述陰影效果

2.1 使用box-shadow來製作多重邊框

background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0, 0, 0, .6)

• 第一個length參數設置水平偏移量，如果是負值則陰影位於元素左邊；
• 第二個設置垂直偏移量，如果是負值則陰影位於元素上面。
• 第三個值越大，模糊面積越大，陰影就越大越淡。 不能為負值。
• 第四個取正值時，陰影擴大；取負值時，陰影.收縮
• 第五個參數為顏色
• 還有一個參數用來設置陰影位置，默認在邊框外，在最前面設置inset讓陰影在邊框內

2.2 通過outline製作

使用下面代碼同樣可以實現

background: yellowgreen; border: 10px solid #655; outline: 5px solid deeppink;

outline還可以有一個好處就是可以製作虛線邊框，還可以通過outline-offset屬性來控制它跟元素邊緣之間的距離，接受負值。

background: black; outline: 1px dashed white; outline-offset: -10px;

3. 靈活的背景定位

以往針對容器某個角對背景圖片做偏移定位的時候，一般是這樣寫

background-position:bottom right

或者使用百分比數值代替bottom和right，但是還有更好的方案

3.1 background-position的擴展語法方案

允許我們指定背景圖片距離任意角的偏移量，只要在偏移量前面指定關鍵字

background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a; background-position: right 20px bottom 10px;

上面的代碼表示背景圖片跟右邊緣保持20px,同時跟底部保持10px；background屬性裡面的設置用於回退。

3.2 background-origin方案

此方案用於更好的解決背景圖片偏移量和容器的內邊距一樣時的問題。

• border-box

  背景將會延伸到延伸到外邊界的邊框

• padding-box
  背景描繪在padding盒子，邊框里不會有背景出現。同樣，背景將會延伸到最外邊界的padding.
• content-box
  背景描繪在內容區範圍.
  將background-origin設置成content-box即可
  padding: 10px; background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a; background-origin: content-box;

3.3 calc()方案

background-position: calc(100% - 20px) calc(100% - 10px)

形狀

1. 自適應的橢圓

背景知識：border-radius屬性的基本用法

使用border-radius製作一個圓很簡單，只要給任何正方形元素設置固定寬高及一半長度以上的border-radius，就可以得到圓形

background: #fb3; width: 200px; height: 200px; border-radius: 100px; /*>=正方形邊長的一半*/

1.1 橢圓

在實際開發中可能更多的是讓元素根據內容自動調增，而不是事先設置好寬高，因為很多時候內容是不定的。我們期望：如果寬高相等，就顯示一個圓，不相等就顯示一個橢圓。

解決方案：

border-radius可以單獨指定水平和垂直半徑，只要用一個(/)分隔這兩個值就行。還一個特性是，它可以接受長度值，還可以接受百分比，兩種特性結合，就可以自適應了。

border-radius: 50%;

1.2 半橢圓

border-radius是一個簡寫屬性，包含四個展開式屬性，這樣一來可以通過設置四個角的不同半徑來達到效果。

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
  通過屬性名字可以很清楚的知道他們用於設置哪個角。
  不過還是推薦使用簡潔寫法，因為可以向它一次性提供用空格分開的多個值。
• 傳四個值，這四個值就會被分別從左上角開始以順時針順序應用到各個角
• 傳三個值，則意味著第四個值與第二個值相同
• 傳兩個值，意味著第三個值與第一個值相同，第四個值與第二個值相同。
• 傳一個值，全部相同。

1. 平行四邊形

背景知識：基本變形屬性transform，屬性很多，用到哪個講哪個。

我們一般用skew屬性來對矩形進行斜向拉伸，變成平行四邊形，但是如果直接對元素使用的話，它裡面的內容也會跟著斜向變動。

2.1 嵌套元素方案

對容器內容再應用一次反向的skewX()變形，從而抵消容器的變形效果

< a href="#" class="button"> < div> click me < /div> < /a>

css樣式

.button { transform: skewX(-45deg); } .button > div { transform: skewX(45deg); }

skewX() 定義沿著 X 軸的 2D 傾斜轉換。對應還有skewY(angle)，skew(x-angle,y-angle)

2.2 偽元素方法

上面方法需要添加額外的HTML元素。這裡提供一個不用添加額外的HTML元素的。

這種方法的思路是把所有的樣式(背景、邊框等)應用到偽元素上，然後對偽元素進行變形。

.button { position: relative; /* 其他的文字顏色、內外變局等樣式*/ }

.button::before { content: ; position: absolute; top: 0;right: 0;bottom: 0;left: 0; z-index: -1;

background: #58a; transform: skew(-45deg); }

推薦閱讀：