border
-radius 設定元素的外邊框圓角
border
-radius
:length
; 屬性值 數值 （5px 10px）（百分比）
該屬性是乙個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
單獨設定
border
-top
-left
-radius （左上角）
border
-top
-right
-radius （右上角）
border
-bottom
-right
-radius （右下角）
border
-bottom
-left
-radius （左下角）
box-shadow （為盒子新增陰影）
box
-shadow:h
-shadowv-
shadow
blur
spread
color
inset
;
屬性值
必需 h
-shadow （水平陰影的位置，允許負值） v-
shadow （垂直陰影的位置，允許負值）
可選 blur （模糊距離）
spread （陰影的尺寸）
color （陰影的顏色）
inset 將外部陰影(
ouset
)改為內部陰影，
預設的是**影(
outset
), 但是不可以寫這個單詞,否則造成陰影無效
盒子陰影不占用空間，不會影響其他盒子排列
布局的本質用css把盒子擺放到相應位置搭積木
標準流 （最基本的）塊級元素 ：獨佔一行，從上向下順序排列
行內元素 ：從左到右順序排列，碰到父元素邊緣則自動換行
浮動 (最常用)改變元素標籤預設的排列方式
可以讓多個塊級元素一行無縫隙顯示
定位position static(預設) ;absolute(絕對); relative(相對定位); fixed(固定)
float 屬性 用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣
選擇器
屬性值 none 元素不浮動
預設值 left 元素向左浮動
right 元素向右浮動
特性1.浮動的元素找相鄰帶有浮動的元素頂部對齊,要浮動都浮動
2.浮動的元素脫離標準流,在頁面中不佔據位置
3.浮動的元素只會影響到下面的元素
4.浮動的元素不會超出父元素的padding值,在父元素內部進行浮動
5.浮動的顯示方式基本和行內塊級元素顯示方式一樣
6.浮動的元素是壓不住文字和的
7.浮動的元素不能被text-align:
為什麼要清除浮動 父級沒高度 子盒子浮動了 影響下面布局了，我們就應該清除浮動了
本質清除浮動的本質是清除浮動元素造成的影響
如果父盒子本身有高度，則不需要清除浮動
清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了
方法
額外標籤法
在浮動元素末尾新增乙個空的標籤
選擇器left
不允許左側有浮動元素(清除左側浮動的影響)
right
不允許右側有浮動元素(清除右側浮動的影響)
both
同時清除左右兩邊浮動的影響
例如 <
divstyle
=」clear
:both」>
div>，或者其他標籤（如<
br/>等）
優點通俗易懂，書寫方便
缺點新增許多無意義的標籤，結構化較差
給父元素新增overflow:hidden;
屬性值 hidden 隱藏溢位部分
auto 自動判斷是否新增滾動條
scroll 滾動條
visible 預設值
優點**簡潔
缺點無法顯示溢位的部分
:after 偽元素
**
.clearfix
:after
給父元素新增
.clearfix
ie6,
7專用相容
優點 沒有增加標籤，結構更簡單缺點 照顧低版本瀏覽器
css3新增樣式介紹
webkit transform rotate 3deg 給chrome和safari等webkit核心的瀏覽器使用 moz transform rotate 3deg 給firefox瀏覽器使用 ms transform rotate 3deg 給ie瀏覽器使用 o transform rotat...
css3文字新增樣式
1.opacity opacity屬性指定了乙個元素的透明度。換言之，opacity屬性指定了乙個元素後面的背景的被覆蓋程度。當opacity屬性的值應用於某個元素上時，是把這個元素 包括它的內容 當成乙個整體看待，即使這個值沒有被子元素繼承。因此，乙個元素和它包含的子元素都會具有和元素背景相同的透...
CSS3文字新增樣式
opacity屬性指定了乙個元素的透明度 預設值 1.0 不可繼承 列 divrgba 函式使用紅 r 綠 g 藍 b 透明度 a 的疊加來生成各式各樣的顏色。列 p1 紅 p2 綠 p3 藍 基本文字陰影 text shadow 語法 text shadow h shadow v shadow b...