完全匹配屬性選擇器：[id=value]

包含匹配選擇器：[id*=value]

首字符匹配選擇器：[id^=value]

尾字符匹配選擇器：[id$=value]

陰影：box-shadow:3px ?2px 1px #000 ?/*其他瀏覽器*/ ? ? ??

? ? ? ? ? ? -webkit-box-shadow:3px ?2px 1px #000 ?/*webkit瀏覽器*/

? ? ? ? ? ?-moz-box-shadow:3px ?2px 1px #000 ?/*firefox瀏覽器*/

? ? ? ? ? ??text-shadow和box-shadow差不多

背景：backgroud-size ?設置背景圖像大小 ? ?backgroud-size：10px 5px ; ? ? -webkit-backgroud-size:10px 5px;

? ? ? ? ??backgroud-clip ?確定背景的剪裁區域 ??

? ? ? ?? ?漸變 background：-webkit-gradient(linear/radial,0 0,0 100%,from(#fff) ,to(#000) ); ??

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?線性漸變/徑向漸變

圓角邊框：?border-radius:10px 5px;

? ? ? ? ? ? ? ? ? ? -webkit-border-radius:10px 5px;

? ? ? ? ? ? ? ? ? ? ?-moz-border-radius:10px 5px;

使用viewport設置適應移動設備屏幕大小

<meta ?name="viewport" content="width=device-width,inital-scale=1,user-scalable=0" />

屬性有：width:指定虛擬窗口的屏幕寬度大小

? ? ? ? ? ? ? height:虛擬窗口屏幕高度

? ? ? ? ? ? ??inital-scale:初始縮放比例

? ? ? ? ? ? ??maximum-scale:允許用戶縮放的最大比例

? ? ? ? ? ? ??minimum-scale:允許用戶縮放的最小比例

? ? ? ? ? ? ?user-scalable:是否允許手動縮放

使用media queries

當前屏幕可視區域的寬度最大值為600px時

<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css" />

small.css:

@media screen and(max-width:600px){

demo{

? ?background:#000;

? }

}

屏幕可視區域的長度在600px到900px之間時

?media="screen and(min-width:600px) and (max-width:900px)"

當手機最大屏幕可視區域是480px時

media="screen and(max-device-width:480px)"

當移動設備處于縱向模式下時

media="all and(orientation:portrait)"

當移動設備處于橫向模式下時

media="all and(orientation:landscape)"

轉載于:https://www.cnblogs.com/histoo/archive/2012/11/13/2768612.html

總結

以上是生活随笔為你收集整理的css3学习手记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。