盒陰影及文字操作
阿新 • • 發佈：2018-12-21
str info ado title 500px ctype box meta 分享圖片
一.盒陰影
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <mehtmlta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height:200px; 10 margin:30px auto; 11 border: 1px solid purple;12 /*box-shadow: inset 10px 20px 30px purple,inset -10px -20px 30px purple,inset 15px 25px 30px purple,inset -15px -25px 30px purple;*/ 13 } 14 15 div:hover{ 16 box-shadow: inset 10px 20px 30px purple,inset -10px -20px 30px purple,inset 15px 25px 30px blue,inset -15px -25px 30px blue;17 } 18 </style> 19 </head> 20 <body> 21 <!-- 22 盒陰影 23 box-shadow 24 第一個值:默認省略或者inset 可以省略,省略即為默認 25 處理盒子陰影在盒子的外面,添加即為裏面 26 第二個值: 27 具體的數值 可以是正數,也可以是負數 為盒子陰影x軸的大小 28 第三個值: 29 具體的數值,可以是正數,也可以是負數 為盒子陰影Y軸的大小30 第四個值: 31 具體的數值,可以是正數,不可以是負數,可以省略,省略之後,沒有模糊面積 32 為盒子陰影模糊面積 33 第五個值:具體的顏色值,英文單詞,十六進制 rgb rgba 34 盒陰影可以不斷的添加,中間用逗號隔開 35 --> 36 <div></div> 37 </body> 38 </html>
鼠標經過效果:
二.文字陰影
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 font-size: 30px; 9 text-align: center; 10 -webkit-text-shadow: 20px 20px 30px purple; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 16 第一個值: 17 具體的數值 可以是正數,也可以是負數 為文字陰影x軸的大小 18 第二個值: 19 具體的數值,可以是正數,也可以是負數 為文字陰影Y軸的大小 20 第三個值: 21 具體的數值,可以是正數,不可以是負數,可以省略,省略之後,沒有模糊面積 22 為文字陰影模糊面積 23 第四個值:具體的顏色值,英文單詞,十六進制 rgb rgba 24 文字影可以不斷的添加,中間用逗號隔開 25 為了兼容老版本的瀏覽器正確寫法應該是:-webkit-text-shadow: 20px 20px 30px purple; 26 --> 27 <div>並發癥發燒</div> 28 </body> 29 </html>
三.蒙版
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>巫妖果子</title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 1500px; 10 margin: 0px auto; 11 background:linear-gradient(red,yellow,blue); 12 /*-webkit-*/mask: url("D:/照片大全/蒙版鴨.png") 10px 300px no-repeat; 13 } 14 </style> 15 </head> 16 <body> 17 <div>蒙版 18 目前只有-webkit-內核的瀏覽器支持,其它不支持 19 20 需要PNG的透明度遮罩蒙版 21 22 和背景設置一樣,可以設置多個png為蒙版 23 </div> 24 </body> 25 </html>
四.倒影
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 400px; 10 margin: 50px auto; 11 background:url("D:/照片大全/盛世美顏.jpg") no-repeat; 12 background-size:100% 100%; 13 -webkit-box-reflect:left 10px url("D:/照片大全/給你主宰自己的力量.jpg") 14 /*linear-gradient(to top, 15 rgba(255,255,255,1) 10px, 16 rgba(255,255,255,0.3) 40px, 17 rgba(255,255,255,0) 200px, 18 rgba(255,255,255,0) 19 20 );*/ 21 } 22 </style> 23 </head> 24 <body> 25 <div></div> 26 <!-- 27 倒影只有-webkit-內核瀏覽器支持 28 -webkit-box-reflect:below; 29 30 第一個值 31 控制倒影出現的位置 32 上 above 33 下 below 34 左 left 35 右 right 36 第二個值 37 倒影和本體之間間隔 38 為具體的數值: 比如 10px 39 -webkit-box-reflect: below 10px; 40 第三個值 41 可以是透明度的漸變,也可以是一個png透明的圖片鏈接 42 透明度的漸變 43 -webkit-box-reflect:below 10px linear-gradient(to top, 44 rgba(255,255,255,1) 10px, 45 rgba(255,255,255,0.3) 40px, 46 rgba(255,255,255,0) 200px, 47 rgba(255,255,255,0) 48 49 ); 50 png透明的圖片鏈接(需要一張蒙版類的圖片) 51 -webkit-box-reflect:left 10px url("D:/照片大全/給你主宰自己的力量.jpg") 52 --> 53 </body> 54 </html>
盒陰影及文字操作