CSS

這篇文章主要介紹了css3 box-shadow陰影(外陰影與外光暈)，通過五個測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下基礎說明： 外陰影：box-shadow: X軸 Y軸 Rpx color; 屬性說明（順序依次對應）： 陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值（大小） 陰影的顏色 內陰影：box-shadow: X軸 Y軸 Rpx color inset; 預設是外陰影

相信很多人都有這樣的問題，在頁面配置中float和position:absolute哪個更好用呢？既然是布局，就用float好，這個我比較常用。這個浮動是可以清除的，一般不會影響整體布局。而position，定位，是不受約束的，這個貌似都談不上布局了，一般要是做什麼特殊的定位或者浮動層的時候，可以考慮使用。正常頁面配置，我個人建議用FLOAT1.float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於映像，使文本圍繞在映像周圍，不過在 CSS

一、浮動1.浮動元素1.對於浮動元素，有幾點需要記住： 首先，會以某種方式將浮動元素從文檔的正常流中刪除，不過他還是會影響布局； 2.採取css的特有方式，浮動元素幾乎“集自成一派”，不過他們還是對文檔的其餘部分有影響； 3.當一個元素浮動時，其他元素會“環繞”該元素。浮動元素周圍的外邊距不會合并。 4.不浮動：float:none用於防止元素浮動。2.浮動的詳細內幕 在詳細瞭解浮動的內容之前，首先我們要知道什麼是包含塊。 浮動元素的包含塊時是其最近的塊級祖先元素。

在CSS3裡引入的很多新特徵中，這篇文章主要介紹了css3圖片邊框border-image的用法,具有一定的參考價值，有興趣的可以瞭解一下對於CSS屬性 border ，相信所有的WEB開發人員都非常熟悉。我們可通過設定HTML元素的 border 的寬度、顏色、樣式，來讓HTML元素表現出不同的邊框，比如雙線、虛線、圓點線。但不管你怎麼設定，這些都是一些非常原始的做法。從CSS3起，我們有了一個新的屬性： border-image

為理解使用者代理程式怎樣決定字型變形的粗細，得先從關鍵字100到900談起，然後我們再來看它是如何繼承的。 font-weight允許值 normal | bold | bolder | lighter | l00 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 這些數字關鍵字用於定義與字型的相關特徵的映射關係，即字型的粗細被分成九個等級。例如，OpenType就使用了九個值的數字級。字型有了這 層級之後，這些數字就直接映射到各個級，如10

單列布局水平置中父元素text-align:center;子項目：inline-block;優點：相容性好；不足：需要同時設定子項目和父元素<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-

有時大家在看css時,看到有的css屬性定義為background:transparent。意思就是背景透明。實際上background預設的顏色就是透明的屬性。例如如果一個元素覆蓋在另外一個元素之上，而你想顯示下面的元素，這時你就需要把上面這個元素的background設定transparent。下面介紹css中的background:transparent的作用一、background的介紹background

一、原來不是bug年前遇到此現象，在Chrome瀏覽器下，起初，我還以為是Chrome瀏覽器的bug.今日原型重現，在各個現代瀏覽器下一測，乖乖隆地咚，都是一個尿性，看來是規範使然，不是bug啊！但是，由於現象實在詭異，到目前也想不通是個怎麼回事，故在這裡示範並詢問在座的小夥伴們，為什麼會有此現象？現象描述一個普普通通的table，設定了border-collapse:collapse，合并表格的邊框，這很正常，也很常見。我們給元素設定opacity透明度值，例如0.1，則元素應該透明度就變成1

這篇文章主要介紹了HTML+CSS實現單選框、複選框美觀的樣式,需要的朋友可以參考下1.背景圖html<p class="check-wrappers"> <span class="c-checkbox checked"> <input type="radio" autocomplete="off" name="type" style="

在頁面整體布局中，頁面元素的尺寸大小（長度、寬度、內外邊距等）和頁面字型的大小也是重要的工作之一。一個合理設定，則會讓頁面看起來層次分明，重點鮮明，賞心悅目。反之，一個不友好的頁面尺寸和字型大小設定，則會增加頁面的複雜性，增加使用者對頁面理解的複雜性；甚至在當下訪問終端（iPhone、iPad、PC、Android…）層出不窮的今天，適應各式各樣的訪問終端，將成為手中的一塊“燙手的山芋”。所以在近幾年，“九宮格”式的“流式布局”再度迴歸。為了提供頁面配置，及其它的可維護性、可擴充性，我們嘗試將頁

p中display和visibility屬性差別p中display和visibility屬性差別還是挺大的,雖然Visibility和Display屬性都可以達到隱藏頁面元素的目的，但它們的區別在於如何回應正常文檔流本節向大家描述一下p中display和visibility的差別，visibility屬性是隱藏元素但保持元素的浮動位置，而display實際上是設定元素的浮動特徵，雖然它們都可以達到隱藏頁面元素的目的，但它們的區別在於如何回應正常文檔流。p中display和visibility屬性

web頁面前台編碼時經常用到display:none樣式，平常使用時發現有幾點特徵需要注意1、如果在樣式檔案或分頁檔代碼中直接用display:none對元素進行了隱藏，載入頁面後，在沒有通過js設定樣式使元素顯示的前提下，使用js代碼會無法正確獲得該元素的一些屬性，比如offSetTop,offSetLeft等，返回的值會為0，通過js設定style.display來使元素顯示後才能正確獲得這些值。

margin重疊摘自css2.1規範中文版CSS中，兩個或者多個盒（可能但不一定是兄弟）的相鄰的margin會被結合成一個margin。Margin按這種方式結合叫重疊（collapse），產生的結合的margin叫做重疊margin。margin重疊的計算規則摘自css2.1規範中文版當兩個或者更多的margin合并時，產生的margin寬度為合并margin寬度中的最大值。至於負margin，就從正相鄰margin的最大值中減去負相鄰margin的絕對值的最大值。如果沒有正margin，就用

這種純CSS3美化選項按鈕radio的方法適用於以下情況：1、可相容IE9以上，需要相容IE8的要寫IE的hack把樣式去掉2、只支援選項按鈕radio，因為選項按鈕選中樣式的圓圈可以用CSS做出來，但是複選按鈕checkbox的選中效果對勾就需要圖片或者表徵圖字型庫3、不需要JS支援轉場效果是最終：HTML代碼：<label for="man" class="radio"> <span

先看一下CSS手冊中,對於list-style的解釋定義和用法list-style 簡寫屬性在一個聲明中設定所有的列表屬性。 說明 該屬性是一個簡寫屬性，涵蓋了所有其他列表樣式屬性。由於它應用到所有 display 為 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用於 li 元素，不過實際上它可以應用到任何元素，並由 list-item 元素繼承。 可以按順序設定如下屬性： •list-style-type

.example .pp{ color: orange;}.example.pp2 { color: green;}如上面的兩個定義一個是中間有空格，一個是中間沒空格。第一個class要這樣寫生效：<p class="example">文字文字<span class="pp">pp這個class生效</span>....</p>第二個class要這樣寫生效：<p

往往我們在做一些特殊的陰影製作效果的時候，使用圖片做背景的方式實際上是很差勁的，在不考慮適配老版本瀏覽器的前提下，我們可以使用css3的自訂出自己想要的陰影風格。下面將以曲線陰影和翹邊陰影為例，講解自訂陰影的過程。 先來看下 曲線陰影曲線陰影其實可以使用雙層陰影重疊的方式實現 我們將取消陰影的圖片做下分解應該會更容易理解，如下： 如，圖1基礎的陰影下，在加一個有弧度的陰影即可。 1、圖1基礎陰影很容易實現，內陰影+外陰影.box-shadow1{ box-shadow: 0 1px

正點CSS執行個體---scrollbar 捲軸顏色 設定<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">*********************<STYLE>{SCROLLBAR-FACE-COLOR:#3399cc; SCROLLBAR-HIGHLIGHT-COLOR: white; SCROLLBAR-SHADOW-COLOR: white;

文法： scrollbar-arrow-color : color參數： color : 　指定顏色。請參閱顏色單位和附錄：顏色表 說明： 設定或檢索捲軸方向箭頭的顏色。當捲軸出現但不可用時，此屬性失效。請參閱overflow屬性 。 對應的指令碼特性為scrollbarArrowColor。請參閱我編寫的其他書目。 樣本： div {scrollbar-arrow-color : buttontext;

今天突然有人問我捲軸css自訂的方法，我發現用scrollbar-base-color這種方法只有ie支援，查了半天資料總結如下！！！ IE瀏覽器中自訂捲軸樣式： HTML { scrollbar-base-color: #C0C0C0; scrollbar-base-color: #C0C0C0; scrollbar-3dlight-color: #C0C0C0; scrollbar-highlight-color: #C0C0C0;