✍ 📁 🙈 🙉 🙊

HTML img 圖片標籤

<img src="圖片 URL" alt="圖片文字" title="顯示文字" border="圖片邊框">

參數	用法說明
src	圖片網址，必要項目。
border	圖片邊框，例如 border="0" 代表邊框為 0。
alt	圖片替代文字，當圖片顯示失效，則顯示 alt 文字。
title	圖片文字標示，當滑鼠移經圖片，自動顯示的文字。
width	圖片寬度，例如 width="120px" 代表寬度限制在 120px。
height	圖片高度，例如 height="100px" 代表高度限制在 100px。

width:auto 自動判斷圖片寬度。
<img style="width:auto;" src="https://xxx.jpg" />

width:300px : 將圖片寬度設為 300px。
<img style="width:300px;" src="https://xxx.jpg" />

height: 100px; width: 100px; 將圖片寬度高度設為 100px。
<img src="https://xxx.jpg" style="height: 100px; width: 100px ;" />

height: inherit ; width: inherit; 將圖設為父層的寬度高度屬性值。
<div style="height: 40px; width: 40px;">
<img src="https://xxx.jpg" style="height: inherit; width: inherit; " /></div>

max-width 及 max-height 設為 100px ，將圖寬度/高度有幾大都不能超出 100px。
<img src="https://xxx.jpg" style="height: 400px; width: 400px;max-width:100px;max-height:100px; " />

height: 50% width: 50%; 設定跟父元素的 50% 。
<div style="height: 200px; width: 200px;">
<img src="https://xxx.jpg" style="height: 50%; width: 50%; " /></div>

box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 ) : 設定圖片陰影。
<img style="box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 );" src="https://xxx.jpg" width="200px" />

#imgT 為這個 div id ，加入下列 CCS 後出現背景圖案。
<style>
#imgT {background-image: url("https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg");
-moz-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center; /*置中*/
background-repeat: no-repeat; /*背景圖案不重複*/
border:2px solid #000000; /*邊框樣式與顏色*/
background-color:#CCCCCC; /*背景的顏色*/}
</style>

#HTML #img 圖片標籤 #html img #HTML 圖片標籤

jquery click

#jquery click #html click

CSS Filters濾鏡效果

CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。

blur 模糊	blur(0px)	0px 到100px，的百分比控制
sepia 懷舊	sepia(0)	0 or 1，1為元素轉換成黑白影像
invert 負片	invert(0)	0 or 1，1為元素轉換成負片影像
opacity 透明	opacity(1)	0 to 1，step 0.1 0為元素轉換成全透明影像
contrast 對比	contrast(0)	0 to 10， 10為明亮和陰暗部份的大差距
saturate飽和	saturate(0)	0 to 10， 10為元素轉換成最大飽和度
brightness 亮度	brightness(0)	0 to 10， 10為元素轉換成最大亮度度
grayscale 灰階	grayscale(0)	0 to 10， 10為元素轉換成最大灰階度
hue-rotate 色相旋轉	hue-rotate(0deg)	0deg – 360deg 旋轉色相環
drop-shadow 下拉陰影	drop-shadow(30px 10px 4px #4444dd)	x偏移量 \| y偏移量 \| 陰影模糊半徑 \| 陰影顏色

<table border="2" style="width:100%;height:100%">
<tbody>
<tr><td width="50%" style="text-align: center;vertical-align:middle">
<img id="image" src="https://www.w3schools.com/css/pineapple.jpg">
</td><td>
drop-shadow( 
<INPUT type="text" id="TT1" maxlength="3" value="30" size="1" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px 
<INPUT type="text" id="TT2" maxlength="3" value="10" size="1" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px 
<INPUT type="text" id="TT3" maxlength="3" value="4" size="1" onkeypress="return isNumberKey(event,this.id)" onkeyup="return isNumberKey(event,this.id)">px 
<INPUT type="color" id="TT4"  value="dimgray" onchange="shad()" >
 )

<br>
<input type="range" id="blur" value="0" min="0.0" max="100" step="5" />
<span id="Ttblur"> blur(0px)</span>
<br>
<input type="range" id="grayscale" value="0" min="0.0" max="100" step="5" />
<span id="Ttgrayscale"> grayscale(0%)</span>
<br>
<input type="range" id="brightness" value="100" min="0.0" max="999" step="5" />
<span id="Ttbrightness"> brightness(100%)</span>
<br>
<input type="range" id="contrast" value="100" min="0.0" max="999" step="5" />
<span id="Ttcontrast"> contrast(100%)</span>
<br>
<input type="range" id="rotate" value="0" min="0.0" max="360" step="5" />
<span id="Ttrotate"> rotate(0deg)</span>
<br>
<input type="range" id="invert" value="0" min="0.0" max="1" step="1" />
<span id="Ttinvert"> invert(0)</span>
<br>
<input type="range" id="opacity" value="1" min="0" max="1" step="0.1" />
<span id="Ttopacity"> opacity(1)</span>
<br>
<input type="range" id="saturate" value="1" min="0" max="1" step="0.1" />
<span id="Ttsaturate"> saturate(1)</span>
<br>
<input type="range" id="sepia" value="0" min="0" max="1" step="1" />
<span id="Ttsepia"> sepia(0)</span>
<br>
<input type="button" id="Reset" value="reset" />
</td></tr>
</tbody></table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).on('input change', '#blur', function() {
         $('#Ttblur').html( 'blur('+$(this).val()+'px)' );
         blur = $(this).val() ; Change(); });

$(document).on('input change', '#grayscale ', function() {
         $('#Ttgrayscale ').html( 'grayscale ('+$(this).val()+'%)' );
         grayscale = $(this).val() ; Change(); });

$(document).on('input change', '#brightness', function() {
         $('#Ttbrightness').html( 'brightness('+$(this).val()+'%)' );
         brightness= $(this).val() ; Change(); });

$(document).on('input change', '#contrast', function() {
         $('#Ttcontrast').html( 'contrast('+$(this).val()+'%)' );
         contrast= $(this).val() ; Change(); });

$(document).on('input change', '#rotate', function() {
         $('#Ttrotate').html( 'rotate('+$(this).val()+'deg)' );
         rotate= $(this).val() ; Change(); });

$(document).on('input change', '#invert', function() {
         $('#Ttinvert').html( 'invert('+$(this).val()+')' );
         invert= $(this).val() ; Change(); });

$(document).on('input change', '#opacity', function() {
         $('#Ttopacity').html( 'opacity('+$(this).val()+')' );
         opacity= $(this).val() ; Change(); });

$(document).on('input change', '#saturate', function() {
         $('#Ttsaturate').html( 'saturate('+$(this).val()+')' );
         saturate = $(this).val() ; Change(); });

$(document).on('input change', '#sepia', function() {
         $('#Ttsepia').html( 'sepia('+$(this).val()+')' );
         sepia = $(this).val() ; Change(); });

$(document).on("click","#Reset",function() {
    $("#blur").val("0");blur=0 ; 
            $('#Ttblur').html('blur(0px)');
    $("#grayscale").val("0");grayscale=0;
            $('#Ttgrayscale').html('grayscale(0%)');
    $("#brightness").val("100");brightness=100;
            $('#Ttbrightness').html('brightness(100%)');
    $("#contrast").val("100") ; contrast= 100;
            $('#Ttcontrast').html('contrast(100%)');
    $("#rotate").val("0") ; rotate= 0;
            $('#Ttrotate').html('rotate(0deg)');
    $("#invert").val("0") ; invert= 0;
            $('#Ttinvert').html('invert(0)');
    $("#opacity").val("1") ; opacity= 1;
            $('#Ttopacity').html('opacity(1)');
    $("#saturate").val("1") ; saturate= 1;
            $('#Ttsaturate').html('saturate(1)');  
    $("#sepia ").val("0") ; sepia = 0;
            $('#Ttsepia').html('sepia(0)');  
Change()});

function Change(){
$("#image").css("-webkit-filter", 
"drop-shadow(" + Dshadoe  +")" +
"blur(" + blur + "px)" + 
"brightness(" + brightness + "%)" + 
"grayscale(" + grayscale + "%)" + 
"hue-rotate(" + rotate + "deg)" + 
"contrast(" + contrast + "%)" + 
"invert(" + invert + ")" + 
"opacity(" + opacity + ")" + 
"saturate(" + saturate + ")" + 
"sepia(" + sepia + ")");
}
Change()

function shad(){
var Ctxt =  TT1.value + "px ";
    Ctxt += TT2.value + "px ";
    Ctxt += TT3.value + "px ";
    Ctxt += TT4.value ;
Dshadoe = Ctxt ;
Change();
dd123.innerHTML =Ctxt ;
}

</script>

#CSS Filters濾鏡效果 #html Filters濾鏡效果 #blur 模糊 #sepia 懷舊 #invert 負片 #opacity 透明 #contrast 對比 #saturate飽和 #brightness 亮度 #grayscale 灰階 #hue-rotate 色相旋轉 #drop-shadow 下拉陰影

box-shadow 方塊陰影

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平陰影垂直陰影模糊距離陰影尺寸陰影的顏色內部陰影;

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊距離。測試
spread	可選。陰影的尺寸。測試
color	可選。陰影的顏色。請參閱 CSS 顏色值。
inset	可選。將外部陰影 (outset) 改為內部陰影。

box-shadow: 20px 20px 5px 5px #888888

box-shadow: 20px -20px 10px 0px #888888;

box-shadow: 20px -20px 10px 0px #91e6fb inset;

border-radius: 150px;box-shadow: 5px 5px 60px 40px #ff9900

box-shadow: 10px 10px 5px 0px rgba(20%,20%,40%,0.4), 5px 5px 5px 0px rgba(20%,20%,40%,0.4) inset, -5px -5px 5px 0px rgba(20%,20%,40%,0.4) inset ;

box-shadow: 5px 5px 3px 0px navajowhite,
10px 10px 3px 0px navajowhite,
15px 15px 3px 0px navajowhite,
20px 20px 3px 0px navajowhite,
25px 24px 3px 0px navajowhite;

#box-shadow 方塊陰影

右上角小時鐘

TK +=  '<table id="Ttable">' ;
    TK += '<tbody><tr>' ;
    TK += '<td id="Th">00</td>' ;
    TK += '<td  > : </td>' ;
    TK += '<td id="Tm">00</td>' ;
    TK += '<td  > : </td>' ;
    TK += '<td id="Ts">00</td>' ;
    TK += '<td id="Ap">hh</td></tr><tr>' ;
    TK += '<td id="Dm" colspan="2" >03</td>' ;
    TK += '<td id="Dd" colspan="2">03</td>' ;
    TK += '<td id="DD" colspan="2">03</td>' ;

TK += '</tr></tbody></table>' ;

Ttime.innerHTML  = TK ;
Tclock();
}
TclockA() ;

function Tclock(){
var Dc = ["日","一","二","三","四","五","六"] ;
var TH = new Date().getHours() ;
var TM = new Date().getMinutes() ;
var TS = new Date().getSeconds() ;
var AmPm = (TH > 12)? "pm":"am";

TH = (TH > 12)? TH-12 :TH ;
AP = (TS == 0)? 60:(TS < 10)? "0"+TS :TS;
TH = (TH == 0)? 24:(TH < 10)? "0"+TH :TH ;
TM = (TM == 0)? 60:(TM < 10)? "0"+TM :TM;
TS = (TS == 0)? 60:(TS < 10)? "0"+TS :TS;

Th.innerHTML = TH;
Tm.innerHTML = TM;
Ts.innerHTML = TS;
Ap.innerHTML = AmPm ;
Dm.innerHTML = new Date().getMonth()+1+"月";
Dd.innerHTML = new Date().getDate()+"日";
DD.innerHTML = "星期" + Dc[new Date().getDay()]; 
 
window.requestAnimationFrame(Tclock);
}

</script>

<canvas id="canvas" width="100" height="120" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.translate(canvas.width/2,canvas.height/2-22);
  ctx.scale(0.25,0.25);
  ctx.rotate(-Math.PI/2);
  ctx.strokeStyle = "black";
  ctx.fillStyle = "white";
  ctx.lineWidth = 5;
  ctx.lineCap = "round";

// Hour marks
  ctx.save();
  for (var i=0;i<12;i++){
    ctx.beginPath();
    ctx.rotate(Math.PI/6);
    ctx.moveTo(100,0);
    ctx.lineTo(120,0);
    ctx.stroke();
  }
  ctx.restore();

// Minute marks
  ctx.save();
  ctx.lineWidth = 5;
  for (i=0;i<60;i++){
    if (i%5!=0) {
      ctx.beginPath();
      ctx.moveTo(117,0);
      ctx.lineTo(120,0);
      ctx.stroke();
    }
    ctx.rotate(Math.PI/30);
  }
  ctx.restore();
 
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr>=12 ? hr-12 : hr;

ctx.fillStyle = "black";

// write Hours
  ctx.save();
  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
  ctx.lineWidth = 14;
  ctx.beginPath();
  ctx.moveTo(-20,0);
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();

// write Minutes
  ctx.save();
  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
  ctx.lineWidth = 10;
  ctx.beginPath();
  ctx.moveTo(-28,0);
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();
 
  // Write seconds
  ctx.save();
  ctx.rotate(sec * Math.PI/30);
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-30,0);
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0,0,10,0,Math.PI*2,true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(95,0,10,0,Math.PI*2,true);
  ctx.stroke();
  ctx.fillStyle = "rgba(0,0,0,0)";
  ctx.arc(0,0,3,0,Math.PI*2,true);
  ctx.fill();
  ctx.restore();

ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.strokeStyle = '#325FA2';
  ctx.arc(0,0,142,0,Math.PI*2,true);
  ctx.stroke();

ctx.restore();

ctx.fillStyle = "Blue";
ctx.textAlign="center"; 
ctx.font = "bold 18px serif";
ctx.fillText(td,canvas.width/2,canvas.height-30);
ctx.fillText(tdd,canvas.width/2,canvas.height-10);
  window.requestAnimationFrame(clock);
}

window.requestAnimationFrame(clock);
</script>

Edit

用JavaScript連結Google Sheets #html #網頁計設計 #網頁資料庫 #script #style #網頁小時鐘; #web page hour clock

第三方程式

<div id="nanogallery2"></div>
<script>
$("#nanogallery2").nanogallery2({
thumbnailWidth: 200, // 縮圖寬度
thumbnailHeight: 200, // 縮圖高度
galleryDisplayMode: "moreButton",
galleryDisplayMoreStep: 2, // 最多顯示幾行
items: [{
src: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuyvs16AgCFxqcUQwJL-hbM6BO1KqesIX6dhv0b_OuoJxGHtGol8D2AK-n9b4-G1Mb6QVk9eEgkbehZ3Ok3g7D_fE_cTgc-RpgZn3vLs0L-DumSz9KfEsKlz-uDzv0J-AGbLvY4z51QGUph4DNj0QR0yDk9r_QM7Ht2swrkHGqmNm3xgplRhDE2wuzag/s1600/IMG-20191202-WA0000.jpg',
srct: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuyvs16AgCFxqcUQwJL-hbM6BO1KqesIX6dhv0b_OuoJxGHtGol8D2AK-n9b4-G1Mb6QVk9eEgkbehZ3Ok3g7D_fE_cTgc-RpgZn3vLs0L-DumSz9KfEsKlz-uDzv0J-AGbLvY4z51QGUph4DNj0QR0yDk9r_QM7Ht2swrkHGqmNm3xgplRhDE2wuzag/s300/IMG-20191202-WA0000.jpg',
title: 'pic 1'
}, {
src: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsqgvtbtMMw9gpcE7nwt7yL2EHl69kHvpoXNyXXm66zikbro9EZcah31RDRaasi49_uIkrKnTT8kdSWnruLHE72MpmtsWQ6zYLtn3-MYRQzkjg_8aRq_dsS_P8aFJaR2snH-bSFfvkrlZc86Qu8a5DzcQvuPMyNIwdGBsK4BkMIkODSOs-v71SbCB_Q/s1600/20191126_143256.jpg',
srct: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsqgvtbtMMw9gpcE7nwt7yL2EHl69kHvpoXNyXXm66zikbro9EZcah31RDRaasi49_uIkrKnTT8kdSWnruLHE72MpmtsWQ6zYLtn3-MYRQzkjg_8aRq_dsS_P8aFJaR2snH-bSFfvkrlZc86Qu8a5DzcQvuPMyNIwdGBsK4BkMIkODSOs-v71SbCB_Q/s300/20191126_143256.jpg',
title: 'pic 2'
}, {
src: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsNy1uMUlLwi86lNrgf-M81v0o5hVBi1_PPJMH_orOBiQ7D2nEunRkd1ZfUlqFR-02c9n-IURzVzgb7Zky-nHsw3JGK-qUnrp_3lJ48Ho01z00bYw7UuzJ3zx-y1rBFh7VTJqpxetQoMPE_q8-Dl6_dYydqYkS2kKSzd6JxmTfYkUae2Yd-QFFiAMreA/s1600/20200529_152852.jpg',
srct: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsNy1uMUlLwi86lNrgf-M81v0o5hVBi1_PPJMH_orOBiQ7D2nEunRkd1ZfUlqFR-02c9n-IURzVzgb7Zky-nHsw3JGK-qUnrp_3lJ48Ho01z00bYw7UuzJ3zx-y1rBFh7VTJqpxetQoMPE_q8-Dl6_dYydqYkS2kKSzd6JxmTfYkUae2Yd-QFFiAMreA/s300/20200529_152852.jpg',
title: 'pic 3'
}, {
src: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHsgcJ0H-mPZc-1dybdGBrA11_hkuAKoPNbD5oMAlijaTNJ3Rd-WNQiCrkIMMNdbeAw88ZhNYvMOWJ5M_BePJ1qC3Ce2Jl8PemUrJYfbtA0OMht077z84BEt3ib8cXcMHNJ0InN6qXzaDoqoqEkwCqnHzutqyY4CklCdTTRnYwEsV1F5TvCv1T5C0cQ/s1600/20191025_112621.jpg',
srct: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHsgcJ0H-mPZc-1dybdGBrA11_hkuAKoPNbD5oMAlijaTNJ3Rd-WNQiCrkIMMNdbeAw88ZhNYvMOWJ5M_BePJ1qC3Ce2Jl8PemUrJYfbtA0OMht077z84BEt3ib8cXcMHNJ0InN6qXzaDoqoqEkwCqnHzutqyY4CklCdTTRnYwEsV1F5TvCv1T5C0cQ/s300/20191025_112621.jpg',
title: 'pic 4'
}, {
src: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QDcfnkB1vG7u0cjB5iwUt7l4osEFtG4rP0fOE1QK4XoqpQNzPuQXANpic1ddJkPjeD4tx48dCLEb5IGijY6lQG1K3mznGVI9tnQek4gzOa0Mct1A00HTFnITTLjAGaN9ZDQK13E-GjmAhk_m81dsIWDzBbWBxowOzl8WLNhHSdzSPUVMNAmxOWmTEg/s1600/20200522_164632.jpg',
srct: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QDcfnkB1vG7u0cjB5iwUt7l4osEFtG4rP0fOE1QK4XoqpQNzPuQXANpic1ddJkPjeD4tx48dCLEb5IGijY6lQG1K3mznGVI9tnQek4gzOa0Mct1A00HTFnITTLjAGaN9ZDQK13E-GjmAhk_m81dsIWDzBbWBxowOzl8WLNhHSdzSPUVMNAmxOWmTEg/s300/20200522_164632.jpg',
title: 'pic 5'
}, {
src: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2PElNglFSR1m_LLV2tgdkPI_HgR4S05N9fnn0o0aA9tLk7rEqW9MiTSGaOPzDz5Wf9VIe1dyop4bICQr6DMCYzqvd--OUdKDC1pp31hmSqTh3R9UkMft68mxOcrzjWwn56_FNdSuWSpcHeXasuC0juRl-cxHLIfn8pXVvHXOA_Jhg6DATqTmLe2INA/s1600/IMG_20191208_103211_472.jpg',
srct: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2PElNglFSR1m_LLV2tgdkPI_HgR4S05N9fnn0o0aA9tLk7rEqW9MiTSGaOPzDz5Wf9VIe1dyop4bICQr6DMCYzqvd--OUdKDC1pp31hmSqTh3R9UkMft68mxOcrzjWwn56_FNdSuWSpcHeXasuC0juRl-cxHLIfn8pXVvHXOA_Jhg6DATqTmLe2INA/s300/IMG_20191208_103211_472.jpg',
title: 'pic 6'
}, {
src: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmaTf08B0hrtzCODqvxsLoje1x0qwZ00NZgGoGG8nW2g5DvmDbERNkaz8b56KWCjVrlplJawqE4u6zdL9y_J22fKve9j0Ct39Gj9ESlFu6RdZfhI18ITcazuInLYV7l26hrP7EGF9owfapQIdNXqGj1rnabv98JGtRRFMNHD1mV-Fgq5Kf3Nxf7Ijnw/s1600/20200713_103727.jpg',
srct: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmaTf08B0hrtzCODqvxsLoje1x0qwZ00NZgGoGG8nW2g5DvmDbERNkaz8b56KWCjVrlplJawqE4u6zdL9y_J22fKve9j0Ct39Gj9ESlFu6RdZfhI18ITcazuInLYV7l26hrP7EGF9owfapQIdNXqGj1rnabv98JGtRRFMNHD1mV-Fgq5Kf3Nxf7Ijnw/s300/20200713_103727.jpg',
title: 'pic 7'
}, {
src: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-quKwarqtfqme3hZPKLiZAAv76HLTAGOynUrglz7pBl9B_yW9yvtnkwivkVB7alwGct7t7T6-COMMBIHfUOP1y3QmZDTpyKeRoYDm3S0AL9kiHZmQmOQINfOEkorO0uJnI2XLjXewf9pTdsyvMXgJb76stBtSYch_vw6uX9PxYVTjcRT23AFFtzCHA/s1600/20191108_175155.jpg',
srct: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-quKwarqtfqme3hZPKLiZAAv76HLTAGOynUrglz7pBl9B_yW9yvtnkwivkVB7alwGct7t7T6-COMMBIHfUOP1y3QmZDTpyKeRoYDm3S0AL9kiHZmQmOQINfOEkorO0uJnI2XLjXewf9pTdsyvMXgJb76stBtSYch_vw6uX9PxYVTjcRT23AFFtzCHA/s300/20191108_175155.jpg',
title: 'pic 8'
}]
});
</script>

Edit

screen

script Window Screen 屏幕信息

gffggf

Edit

#html clientWidth #html clientHeight #html offsetWidth #html offsetHeight #html scrollWidth #html scrollHeight #html screenTop #html scrollLeft #html clientHeight #html clientWidth #html screen.pixelDepth #html screen.colorDepth #html screen.availWidth #html screen.availHeight #html screen.width #html screen.height #html script Window Screen #html 屏幕信息 #html script Window Screen 屏幕信息

box-shadow 方塊陰影

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平陰影垂直陰影模糊距離陰影尺寸陰影的顏色內部陰影;

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊距離。測試
spread	可選。陰影的尺寸。測試
color	可選。陰影的顏色。請參閱 CSS 顏色值。
inset	可選。將外部陰影 (outset) 改為內部陰影。

box-shadow: 20px 20px 5px 5px #888888

box-shadow: 20px -20px 10px 0px #888888;

box-shadow: 20px -20px 10px 0px #91e6fb inset;

border-radius: 150px;box-shadow: 5px 5px 60px 40px #ff9900

box-shadow: 10px 10px 5px 0px rgba(20%,20%,40%,0.4), 5px 5px 5px 0px rgba(20%,20%,40%,0.4) inset, -5px -5px 5px 0px rgba(20%,20%,40%,0.4) inset ;

box-shadow: 5px 5px 3px 0px navajowhite,
10px 10px 3px 0px navajowhite,
15px 15px 3px 0px navajowhite,
20px 20px 3px 0px navajowhite,
25px 24px 3px 0px navajowhite;

#box-shadow 方塊陰影

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

HTML img 圖片標籤

HTML img 圖片標籤

jquery click

CSS Filters濾鏡效果

CSS Filters濾鏡效果

box-shadow 方塊陰影

box-shadow 方塊陰影

右上角小時鐘

右上角小時鐘

第三方程式

screen

script Window Screen 屏幕信息

box-shadow 方塊陰影

box-shadow 方塊陰影

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

HTML img 圖片標籤

CSS Filters濾鏡效果

box-shadow 方塊陰影

右上角 小時鐘

script Window Screen 屏幕信息

box-shadow 方塊陰影

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

右上角小時鐘