box-shadow

Chrome和Safari 寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。

.box-shadow-6{  
    box-shadow:-10px 0 10px red, /*左邊陰影*/  
    10px 0 10px yellow, /*右邊陰影*/  
    0 -10px 10px blue, /*頂部陰影*/  
    0 10px 10px green; /*底邊陰影*/  
}

根據input的type來控制css樣式

1.用css中的type選擇器

input[type="text"]{ }

2.用css的expression判斷表達式

input{ background-color:expression(this.type=="text"?‘#FFC‘:‘‘);}

css強制性換行

div{
  word-break:break-all; /*支持IE，chrome，FF不支持*/
  word-wrap:break-word;/*支持IE，chrome，FF*/
}

CSS :first-child 選擇器,:last-child選擇器,nth-child(IE7,8無效，不識別)

:nth-child(2)選取第幾個標簽，“2可以是你想要的數字”
:nth-child(2n)選取偶數標簽，2n也可以是even
:nth-child(2n-1)選取奇數標簽，2n-1可以是odd
:nth-child(3n+1)自定義選取標簽，3n+1表示“隔二取一”

css3實現背景顏色漸變

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);

第一個參數：設置漸變的起始位置。第二個參數：設置起始位置的顏色。第三個參數：設置終止位置的顏色

媒體查詢功能

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

實現三角形

div{
  position:absolute;
  left:50%;
  bottom:0;
  margin-left:-10px;
  width:0;
  height:0; 
  border-width:10px;
  border-style:solid dashed dashed dashed;
  border-color:transparent transparent #71151c transparent;
}

css3水平垂直居中

div{
  display: box; 
  display: -webkit-box; 
  display: -moz-box; 
  -webkit-box-pack:center; 
  -moz-box-pack:center; 
  -webkit-box-align:center; 
  -moz-box-align:center; 
}

樣式改變單詞的大小寫

首字母大寫：text-transform:capitalize

全部大寫：text-transform:uppercase

全部小寫：text-transform:lowercasecase

<span style="text-transform:capitalize;" >this is a test!!!</span>

首字母大寫<inputtype="text"style="text-transform:capitalize;">

全部大寫<inputtype="text"style="text-transform:uppercase;">

全部小寫<inputtype="text"style="text-transform:lowercasecase;">

表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址

<table border=邊框大小>...</table>設定表格邊框大小(使用數字)

<table bgcolor=顏色碼>...</table>設定表格的背景顏色

<table borderclor=顏色碼>...</table>設定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色

<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)

<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)

<table cols=參數>...</table>指定表格的欄數

<table frame=參數>...</table>設定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數字)

<table height=高度>...</table>指定表格的高度大小(使用數字)

<td colspan=參數>...</td>指定儲存格合並欄的欄數(使用數字)

<td rowspan=參數>...</td>指定儲存格合並列的列數(使用數字)

設置表格中的td寬度固定table-layout:fixed

語法：table-layout:automatic | fixed | inherit

automatic：默認。列寬度由單元格內容設定。

fixed：列寬由表格寬度和列寬度設定。

inherit：規定應該從父元素繼承 table-layout 屬性的值。

合並表格邊框border-collapse:collapse

語法：border-collapse:separate | collapse | inherit

separate：默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。

collapse：如果可能，邊框會合並為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。

css常用樣式