技術標籤：csscss3

少用的css程式碼

盒子陰影

語法

box-shadow: h-shadow v-shadow blur spread color inset;

說明

例項

.top {
    box-shadow: 0 5px 5px #CCCCCC;
}

清除元素的預設輪廓

 outline: none;
 

outline（輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。

outline其他屬性

outline-color	規定邊框的顏色
outline-style	規定邊框的樣式
outline-width	規定邊框的寬度
inherit	規定應該從父元素繼承 outline 屬性的設定。

outline-style
說明

outline連寫樣式

outline-color, outline-style, outline-width

注意

請始終在 outline-color 屬性之前宣告 outline-style 屬性。元素只有獲得輪廓以後才能改變其輪廓的顏色。
輪廓線不會佔據空間，也不一定是矩形。
預設值： none 

擴充套件

outline的層級順序：

1、outline在不同的格式化上下文呈現是不一樣的，在塊級元素裡面是可以覆蓋上下兩邊的內容的。在內聯元素之可以覆蓋上面的內容。

2、通常情況下outline會按照後面覆蓋前面的順序正常顯示（同等情況下，如同在文件流裡面都沒有浮動，或者都是浮動，定位的有z-index不算）

3、如果頁面有浮動元素，則先顯示浮動元素的outline，再顯示正常文件流的outline（浮動元素的outline被沒有浮動元素的outline覆蓋）

background

語法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

連寫

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

說明

圖文對齊

語法

vertical-align: middle;

說明

input對齊

第一種 直接用input寫
這種不太好對齊 可能用&nbsp去對齊，但是太麻煩。

第二種 用table去佈局
這種比較好對齊，可以採用

<table >
        <tr><td>登入名</td><td><input type="text"></td></tr>
        <tr><td>密碼</td><td><input type="text"></td></tr>
    </table>

效果是這樣的

第三種 用label標籤來對齊

<label for="inputs">登入名</label><input type="text" id="inputs"></input>
    <br />
    <label for="input2">密碼</label><input type="text" id="input2"></input>

這樣只需要在css中設定

label{
            display: inline-block;
            min-width: 100px;/*或者 width: 100px;*/
        }

背景顏色漸變，只換顏色，不漸變

	 background: linear-gradient(to right, red 0%,red 50%,white 51%,white 100%);

清除浮動

程式碼

.product-details .w1200::after {
    content: "";
    display: block;
    clear: both;
}

font樣式連寫

連寫順序

font-style font-variant font-weight font-size/line-height font-family

說明

background連寫

連寫順序

background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image

語法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

說明