CSS3小技術（一）

時間 2019-11-17

標籤 css3 css 技術欄目 CSS 简体版

原文原文鏈接

1 給背景增長陰影

這裏及介紹兩個方法 css

通用的非CSS3： html

img{
	background-color: #fff;
	border:1px solid #a9a9a9;
	padding:4px;
	margin:-5px 5px 5px -5px;  //用負的外邊距來事圖像偏移，露出背景色來產生陰影
}

CSS3：前端

img{
	box-shadow:3px 3px 6px #666;//投影的垂直和水平偏移，投影寬度，顏色 
}

2 圓角框

CSS3標準中增長了圓角框，不在單單的只有直角，並且對代碼的調試和維護更加簡單。省略了在Photoshop和瀏覽器的切換。我我的感受這個標準很好，現代瀏覽器也都在支持。 css3

box{
    border-radius:1em;			
    -moz-border-radius:1em;		//Mozilla 前綴
    -webkit-border-radius:1em;	        //Safari 前綴
}

3不透明度

不透明度通常會在彈出對話框中使用，另外在一些菜單中也會採用。另外，不透明度能夠和圓角框一塊兒使用，也沒有問題。 web

.alert{
	background-color:#fff;
	border-radius:2em;
	opacity:0.8;
	filter:alpha(opacity=80);   //IE 
}

另外一種方法，在背景色中一塊兒設置：

.alert{
	background-color:rgba(0,0,0,0.8);
	border-radius:1em;
}

4圖像翻轉

1.多個圖像應用，經過改變背景樣式，這樣會請求數量比較多，效率較低。這裏再也不贅述。
2.應用一個長圖像來改變對齊方式使不一樣部分的圖像相應顯示。好處是減小請求次數，加快效率，不會延遲。要求圖像像素徹底掌握，清除像素位置。 express

a:link,a:visited{
	display:block;
	background-image:urrl(xxx) -200px 0 no-repeat;
	width:203px;
	height:72px;
	text-indent:-1000em;
	text-decoration:none;

}
a:hover,a:focus{
	background-position:right top;
}
a:active{
	background-position:left top;
}

可是上述代碼在IE中仍是會發送HTTP請求。因此咱們又須要如下代碼：

html{
       filter:expression(document.execCommend("BackgroundImageCache",false,true))
}

這樣咱們打開IE背景緩存來緩存背景，或者將背景應用在父標籤上。

5運用css3 text-shadow box-shadow border-radius建立多樣式按鈕實例

a{
	display:block;
	width:6.6em;
	height:1.4em;
	line-height:1.4;
	text-align:center;
	text-decoration:none;
	border:1px solid #66044;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	background-colot:green;
	color:#fff;
        text-shadow:2px 2px 2px #66a300;
	-moz-box-shadow:2px 2px 2px #ccc;
	-webkit-box-shadow:2px 2px 2px #ccc;
	box-shadow:2px 2px 2px #ccc;
}

6製做一個水平的頁碼導航條

<style type="text/css">
	ol.page{
		margin:0;
		padding:0;
		list-style-type:none;}//去除前端修飾
	ol.page li{
		float:left;
		margin-right:0.6;}
	ol.page a,
	ol.page li.selected{
		display:block;
		padding:0.3em 0.5em;
		border:1px solid #ccc;
		text-decoration:none;}//去除下劃線
	ol.page a:hover,
	ol.page a:focus,
	ol.page li.selected{
		background-color:blue;
		color:white;}	
	ol.page a[rel="prev"]       
	ol.page a[rel="next"]{
		border:none;}		//去除箭頭邊框
	ol.page a[rel="prev"]:before{
		content:"\00AB";
		padding-right:0.2em;}//增長箭頭
	ol.page a[rel="next"]:after{
		content:"\00BB";
		padding-left:0.2cm;}	//增長箭頭
</style>
</head>

<body>
<ol class="page">
	<li><a href="#" rel="prev">Prev</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#" rel="next">Next</a></li>
</ol>
</body

這裏列表在使用浮動後將再也不佔據文檔流的空間，因此父列表標籤會自動縮小從而父標籤背景不可見。
因此在父標籤增長屬性overflow:hidden; 瀏覽器

另外在這裏對CSS的一些坑作一些提示：緩存

1 百分比是以父標籤來作參照的。學習

2 在IE中 text-align:center;是全部都居中，不僅僅是文本。 spa

3 IE6如下不支持margin:auto;

4 css規範同一屬性不容許使用混合單位,可是不少瀏覽器都支持，不知道CSS怎麼搞的。

5 由於層疊樣式可能會發生樣式的覆蓋，形成樣式失效，因此咱們推薦試用如下順序
a:link{}未訪問 a:visited{}訪問過 a:hover{}懸停 a:focus{}用鍵盤鏈接到鏈接上 a:active{}單擊時
另外例如按鈕輸入框表格均可以使用這些僞類標籤。