CSS盒子陰影 偽類

2021-08-08 02:43:47 字數 1771 閱讀 2530

box-shadow:水平陰影,垂直陰影,模糊距離,陰影尺寸,陰影顏色,內外陰影

注意:內陰影inset 外陰影預設值

after before 偽類

這兩個偽類功能:在目標盒子追加新盒子

after 子集結尾處追加盒子

before 子集開頭處追加盒子

注意:1.偽類追加的盒子顯示模式都是行內,一般配合定位去使用

2.after和before偽類需要書寫 content:「」 ;即便沒有任何內容新增也要引號留空

例子:

.row1 a:after

清除浮動就是為了解決父親盒子高度為0的問題

清除浮動兩種方式:

1.clear來清除

額外標籤法:在最後乙個浮動的盒子後邊加乙個空的盒子,給這個盒子清除浮動

給父盒子新增偽元素: .clearfix:after  .clearfix //ie6

2建立父盒子的bfc

json with padding

1.script標籤

2.用script標籤載入資源是沒有跨域問題的

在資源載入進來之前定義好乙個函式,這個函式接受乙個引數(資料),函式裡面做一些事情

用script標籤載入對應遠端檔案資源,當載入進來後,執行之前定義好的函式,並把資料當做函式的引數傳入進去。

css**:

1.border_cort, .border_corr, .border_corb, .border_corl

8.border_cort

12.border_corr

16.border_corb

20.border_corl

html**:

1

<

span

class

="border_cort"

>

span

>

//下箭頭

2<

span

class

="border_corb"

>

span

>

//上箭頭

3<

span

class

="border_corl"

>

span

>

//右箭頭

4<

span

class

="border_corr"

>

span

> //左箭頭

white-space: nowrap;overflow: hidden;text-overflow: ellipsis;word-wrap:normal
position的預設值是static,(也就是說對於任意乙個元素,如果沒有定義它的position屬性,那麼它的position:static) 

如果你想讓這個#demo裡的乙個div#sub相對於#demo定位在右上角的某個地方,應該給#demo相對定位,#sub絕對定位。 

absolute是相對於自己最近的父元素來定位的,如果你不給#demo相對定位,那麼#sub的絕對定位就是相對於body來定位的。 

relative是相對於自己來定位的,例如:#demo,這時#demo會在相對於它原來的位置上移50px。 

另:relative 不脫離文件流,absolute 脫離文件流。也就是說:relative 的元素儘管表面上看到它偏離了原來的位置,但它實際上在文件流中還是沒變。absolute的元素不僅位置改變了,同時也脫離了文件流。

CSS陰影盒子

1.inset 可選 內陰影,不設定inset,表示盒子外部顯示乙個投影。也可寫在最後。2.橫向偏移量 必選 設定為正值,表示陰影相對盒子向右偏移。負值表示陰影相對盒子向左偏移 3.縱向偏移量 必選 設定正值,表示陰影相對盒子向下偏移,反之則相反。4.模糊範圍 可選 值越大,陰影模糊範圍越大,顏色越...

css文字陰影和盒子陰影

文字陰影 text shadow 4個引數 水平陰影位置,垂直陰影位置,陰影模糊距離,陰影顏色 css h1 html 頁面效果 注意 text shadow的引數顏色可以寫在前面也可以寫在後面,但是不能寫在中間,否則沒有效果。h1 頁面效果 text shadow還支援樣式疊加 h1 頁面效果 注...

css中box shadow盒子陰影

影 box shadow x軸 y軸 rpx color 屬性說明 順序依次對應 陰影的x軸 可以使用負值 陰影的y軸 可以使用負值 陰影模糊值 大小 陰影的顏色 內陰影 box shadow x軸 y軸 rpx color inset 預設是 影 內陰影 inset 可以設定成內部陰此屬性使用於盒...