標籤隱藏
1、顯示方式 display陰影display: none;
/*表示在頁面中隱藏,並且不佔位,但是重新顯示出來又會佔位*/
2、透明度 opacity
opacity: 0;
/* 0 代表完全透明 1 代表完全顯示 但是即使是透明了也會在頁面中佔位*/
/*顯示方式透明沒辦法找到中間值,所以不可以做漸變操作
透明度可以找到中間值,可以做出漸變的效果
*/
/*陰影box-shadow: x軸移動 y軸移動 虛化程度 陰影寬度 顏色*/固定定位box-shadow: 10px 0 10px 1px red;
/*並且乙個標籤的box-shadow後面可以跟多個陰影,用逗號隔開*/
box-shadow: 10px 0 10px 1px red,0 10px 10px 1px green;
/*絕對定位vw vh 指定的寬高是根據當前頁面視窗的寬高來進行判定的
80vw 這裡的80表示的是百分百
*//*
固定定位 fixed
一旦開啟定位屬性
1.left top right bottom 四個方位都能參與布局
2.子級標籤獲取不到父級標籤的寬度,也撐不起父級的高度
3.固定定位布局參考的物件是瀏覽器的視窗
4.布局依據:固定定位的盒子四邊的距瀏覽器視窗四邊的距離
5.如果布局出現衝突:上下取上, 左右取左
6.如果定位顯示重疊通過z-index可以選擇誰顯示在上面(z-index可看後續詳細介紹)
*/
/*相對定位絕對定位 absolute
1.子級標籤獲取不到父級標籤的寬度,撐不起父級標籤的高度
2.絕對定位的標籤都是相對於乙個參考係進行定位,之間不會相互影響
4.四個方向都能參與定位
5.上下取上,左右取左
自己採用絕對定位,一般都是想參照父級標籤進行定位
所以父級標籤必須要定位才能作為子級標籤的參考係
父級標籤可以採用fixed absolute 但是這兩種都會影響盒模型
relative(相對定位)不會影響盒模型:也就是父相子絕(經常同時出現)
*/
/*標籤隱藏相對定位 relative
1.相對定位不同於固定定位和絕對定位,相對定位可以獲取父級的寬度,也可以撐開父級的高度
2.相對定位的參考係是自身的原有位置
3.相對定位移動的是圖層,盒子還在原地沒動
4.相對定位一般配合絕對定位使用(一般不單獨使用)
*/
1、顯示方式 display陰影display: none;
/*表示在頁面中隱藏,並且不佔位,但是重新顯示出來又會佔位*/
2、透明度 opacity
opacity: 0;
/* 0 代表完全透明 1 代表完全顯示 但是即使是透明了也會在頁面中佔位*/
/*顯示方式透明沒辦法找到中間值,所以不可以做漸變操作
透明度可以找到中間值,可以做出漸變的效果
*/
/*陰影box-shadow: x軸移動 y軸移動 虛化程度 陰影寬度 顏色*/固定定位box-shadow: 10px 0 10px 1px red;
/*並且乙個標籤的box-shadow後面可以跟多個陰影,用逗號隔開*/
box-shadow: 10px 0 10px 1px red,0 10px 10px 1px green;
/*絕對定位vw vh 指定的寬高是根據當前頁面視窗的寬高來進行判定的
80vw 這裡的80表示的是百分百
*//*
固定定位 fixed
一旦開啟定位屬性
1.left top right bottom 四個方位都能參與布局
2.子級標籤獲取不到父級標籤的寬度,也撐不起父級的高度
3.固定定位布局參考的物件是瀏覽器的視窗
4.布局依據:固定定位的盒子四邊的距瀏覽器視窗四邊的距離
5.如果布局出現衝突:上下取上, 左右取左
6.如果定位顯示重疊通過z-index可以選擇誰顯示在上面(z-index可看後續詳細介紹)
*/
/*相對定位絕對定位 absolute
1.子級標籤獲取不到父級標籤的寬度,撐不起父級標籤的高度
2.絕對定位的標籤都是相對於乙個參考係進行定位,之間不會相互影響
4.四個方向都能參與定位
5.上下取上,左右取左
自己採用絕對定位,一般都是想參照父級標籤進行定位
所以父級標籤必須要定位才能作為子級標籤的參考係
父級標籤可以採用fixed absolute 但是這兩種都會影響盒模型
relative(相對定位)不會影響盒模型:也就是父相子絕(經常同時出現)
*/
/*相對定位 relative
1.相對定位不同於固定定位和絕對定位,相對定位可以獲取父級的寬度,也可以撐開父級的高度
2.相對定位的參考係是自身的原有位置
3.相對定位移動的是圖層,盒子還在原地沒動
4.相對定位一般配合絕對定位使用(一般不單獨使用)
*/
相對定位實現簡單陰影效果
隨著html和css的迅速發展,網頁元素實現陰影效果的方法已經非常靈活多樣,不過今天還是針對新手介紹一種簡單易懂的方法。相對定位 相信大家都不陌生了,沒錯,我們就是利用元素位移,再加上其父級元素的背景色來實現陰影效果的。看 html css container,content,content img...
Python ccs動畫及陰影
動畫及陰影 0.什麼時候該用什麼布局 一.拼接網頁 將區域整體劃分起名 對其他區域布局不產生影響 提出公共css reset操作 當有區域傳送顯示重疊 脫離文件流導致的 需要通過z index調整層級 一定需要最外層,且最外層做自身布局時,不要做過多布局操作 二.過渡 動畫 transition屬性...
css圓角邊框及陰影
css3可以簡單理解成是css的增強版,它的優點在於不僅有利於開發與維護,還能提高 的效能。圓角在實際開放過程中,還是蠻常見的。以前基本是通過背景做的,有了css3後可以使用簡單的屬性搞定,可以通過border radius設定元素的圓角半徑。1 圓角邊框語法 圓角邊框屬性 border radiu...