CSS

transparent是透明的意思，實際上background預設的顏色就是透明的屬性一般使用情境：如果一個元素覆蓋在另外一個元素之上，而你想顯示下面的元素，這時你就需要把上面這個元素的background設定為transparent有時我在看css時,看到有的css屬性定義為background:transparent。意思就是背景透明。實際上background預設的顏色就是透明的屬性。所以寫和不寫都是一樣的

首先要知道，p是區塊層級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流。可以看出，即使p1的寬度很小，頁面中一行可以容下p1和p2，p2也不會排在p1後邊，因為p元素是塊級，獨佔一行的。注意，以上這些理論，是指標準流中的p。無論多麼複雜的布局，其基本出發點均是：“如何在一行顯示多個p元素”。浮動可以理解為讓某個p元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次，所以叫float。如，假設中的p2浮動，那麼它將脫離標準流，但p1、p3、p4仍然在標準流當中，所以p3會自動向上移動，佔

CSS3中有關於Border的屬性一共有三個：圓角border-radius，圖片邊框border-image,邊框多顏色border-color，其中圓角border-radius是常用的一個屬性，而且現在很多網站製作圓角效果都使用border-radius來實現。 /*我們可以分別給各邊上色*/ border-top-color: <color>/*給上邊框上色*/ border-right-color: <color> /*給右邊框上色*/

-webkit-user-select 和 -moz-user-select或許你常常不希望使用者在你的網站上選擇文本，無論是否是出於著作權的原因。通常大家會有js來實現，另一個方案就是，將-webkit-user-select 和-moz-user-select

以前只用到 list-style:none; 這種方式，原以為也只這種方式呢，這個方式只不過是讓 li 前的標記去掉而已，下面為大家介紹下CSS: list-style 和 inline 用法詳解，感興趣的朋友不要錯過平時只顧著寫程式，寫 p 或 span 或 ul li 之類的，常常遇到一莫名的問題，自己的解決方式可能是 top: -10px 也可能 float:left

有沒有覺得瀏覽器內建的原始捲軸很不美觀，同時也有看到很多網站的自訂捲軸顯得高端，就連chrome32.0開發板都拋棄了原始的捲軸，美觀多了。那webkit瀏覽器是如何自訂捲軸的呢？前言webkit支援擁有overflow屬性的地區，列表框，下拉式功能表，textarea的捲軸自訂樣式，所以用處還是挺大的。當然，相容所有瀏覽器的捲軸樣式目前是不存在的。示範來看看這2個捲軸demo： demo1（圖片版）、demo2（純CSS3版）捲軸組成::-webkit-scrollbar

這是一款基於jQuery和CSS3的焦點圖動畫外掛程式，外掛程式非常迷你，功能也比較簡單，它的特點是圖片切換按鈕類似一條時間軸，點擊時間軸的圓圈即可切換到相應的圖片。點擊切換按鈕時，按鈕會出現漸隱漸顯的發光特效，圖片切換過程中整張圖片過渡的效果非常柔和，並且圖片描述也相應以動畫的方式顯示在圖片上，是一款非常棒的CSS3圖片切換組件。線上示範源碼下載HTML代碼：<p id="gal"> <nav class="galnav">

　　《CSS3 經典教程系列》的前一篇文章向大家詳細介紹了 text-shadow 文本陰影特性的用法，今天這篇文章我們在一起來看看 CSS3 中實現漸層效果的 Gradient 屬性的具體用法。在以前，漸層效果和陰影、圓角效果一樣都是做成圖片，直接編寫 CSS 代碼就可以實現。您可能感興趣的相關文章Web 開發人員和設計師必讀文章推薦20個非常絢麗的 CSS3 特性應用示範35個讓人驚訝的 CSS3 動畫效果示範推薦12個漂亮的 CSS3 按鈕實現方案24款非常實用的 CSS3

文法：writing-mode : lr-tb | tb-rl/* 關鍵字值 */ writing-mode: horizontal-tb; /* 預設值 */ writing-mode: vertical-rl; writing-mode: vertical-lr; /* 全域值-關鍵字inherit IE8+，initial和unset IE13才支援 */ writing-mode: inherit; writing-mode: initial; writing-

這篇文章主要介紹了利用css3+虛擬元素實現滑鼠移入時底線向兩邊展開效果的相關資料，文中先進行了詳細的介紹，方便大家理解，而後給出了完整的執行個體代碼讓大家可以參考學習，需要的朋友們下面來一起學習學習吧。先來看看：實現思路：將虛擬元素:before和:after定位到元素底部中間，設定寬度從0變成100%達到目的。實現方法：1、首先定義一個塊狀元素（行內元素沒有寬高）並修改樣式為一個背景色為淺灰色的矩形，設定相對定位。html代碼<p

 突然有需求要做一個圓環的音頻播放進度條（效果），自己琢磨嘗試了半天，也沒有實現。最後度娘一下，才知道css還有一個clip屬性，完美實現需求。分享一下，說不定能幫其它小夥伴。至於有沒有用，那就不知道了，who care！OK，費話打住，Let's go!CSS clip 屬性  先簡單瞭解一下css clip屬性說明clip 屬性剪裁絕對位置元素。這個屬性用於定義一個剪裁矩形。對於一個絕對定義元素，在這個矩形內的內容才可見。出了這個剪裁地區的內容會根據 overflow

Z-index 在我們常用的css中z-index 屬性是設定節點的堆疊順序, 這是我們對 z-index 屬性普遍的認識. 與此同時, 我們總是對堆疊順序的概念模糊不清，這樣將會導致我們在平時的布局中出現一些問題。下面我個人對css中z-index的一些個人的認識，希望能幫到大家，有說錯的地方希望大家指正。

詳解css中的z-index，如果都沒有z-index，結果又會是怎樣呢？小編帶你們來看一下。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>z-index</title><style type="text/css">*{margin: 0;padding:

在這篇文章中，我們將不討論使用 CSS 動畫的好處，也不會談論 JS 動畫是否比 CSS 動畫更快，而是與你分享一些 CSS 工具，架構和教程。它們將有助於緩解你在學習 CSS 動畫中的困擾，並協助你節省一些時間。CSS 動畫工具和架構1. Animate.css Animate.css 是一個跨瀏覽器 CSS 動畫的集合，你可以在捲軸、首頁上等 Web 項目中使用它。2. Stylie Stylie 是一個可視化的 CSS3 動畫工具，你可以使用它來配置和產生專屬的動畫合集。3. animo.

CSS3 vw 單位Paste_Image.png100vw = 100% 視窗寬度100vh = 100% 視窗高度這樣實現自適應正方形(固定長寬比例的容器)就會相當簡單![lang=stylus].box width 10vw height 10vw既然是新單位, 必然就會有 相容性問題.[lang=jade].img-box img(src="img/a.png")[lang=stylus].img-box width 10vw height 10vw

本文主要介紹了CSS中px em

CSS（Cascading Style

BOX類型會影響呈現和布局, 基本的BOX類型有兩種: 塊級(block-level)和行內級(inline-level). 事實上還有其他類型的BOX(如table, list-item等), 不過最終都會當作塊級BOX或者行內級BOX來處理.塊極BOX的特徵是從新的一行開始內容, 並且能包含其他塊級BOX和行內級BOX.行內級BOX是那些不能形成新的內容塊的元素. 它不會從新行開始,

全文引自這裡，很棒的一篇文章what由於不同廠商的瀏覽器或某瀏覽器的不同版本（IE6~IE11，Firefox/Safari/Opera/Chrome等），對css的支援、解析不一樣。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同的版本寫特定的css樣式，把這個針對不同瀏覽器/不同版本寫相應的css code的過程叫做css

　　使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則如下：　　顏色　　16進位的色彩值，如果每兩位的值相同，可以縮寫一半，例如：　　#000000可以縮寫為#000;#336699可以縮寫為#369;　　盒尺寸　　通常有下面四種書寫方法:property:value1; 表示所有邊都是一個值value1；property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2property:value1