✍ 📁 🙈 🙉 🙊

border-style

<h3>CCS border 邊框</h3>
<pre>border-style 屬性指定邊框的樣式。</pre>
            
<table style="width:100%">
<tbody><tr>
<td style="border-style:solid">實線 border-style:solid
</td><td style="width:10%"></td>
<td style="border-style:dashed;">虛線 border-style:dashed
</tr><tr>

<td style="border-style:double;">雙線 border-style:double 
</td><td></td>
<td style="border-style:dotted;">點線 border-style:dotted
</tr><tr>

<td style="border-style:groove;">凹線 border-style:groove 
</td><td></td>
<td style="border-style:ridge;">凸線 border-style:ridge
</tr><tr>

<td style="border-style:inset;">嵌入線 border-style:inset 
</td><td></td>
<td style="border-style:outset;">浮出線 border-style:outset 
</tr><tr>

</tr></tdody></table>
<br><br>

<div style="border-width:9px; border-style:solid">
邊框寬度為 9px border-width:9px; border-style:solid 
</div>
<br>

<div style="border-width:medium; border-style:dashed">
邊框寬度為中等 border-width:medium; border-style:dashed 
</div>
<br>

<div style="border-color:#0000FF; border-style:solid">
藍色邊框 border-color:#0000FF; border-style:solid 
</div>
<br>

<div style="border-color:red; border-style:dotted">
紅色邊框
 border-color:red; border-style:dotted
</div>

h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
pre {font-size: 18px;}
</style>

<div style="border: 10px ridge orchid;border-radius:50% 50% 50% 50%;
               text-align: center;">
<pre>border: 10px ridge pink
   border-radius:50% 50% 50% 50%</pre>
</div>
<br>

<div style="border: 10px solid pink;border-radius:40px 40px 40px 40px;
               text-align: center;">
<pre>border: 10px ridge pink
   border-radius:40px 40px 40px 40px</pre>
</div>
<br>

<div style="border-left-style:solid; border-top-style:dashed;
            border-right-style:dotted;border-bottom-style:double;">
<pre>  左邊框為實線 border-left-style:solid
  上邊框為實線 border-top-style:dashed
  下邊框為虛線 border-right-style:dotted
  且顏色為綠色 border-bottom-style:double</pre>
</div></div>

td , div {border-width:5px 5px 5px 5px;
          padding:5px 5px;
          font-size: 20px; }

h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
pre {font-size: 18px;}
</style>

<table style="width:100%">
<tbody><tr>
<td>
<div style="border: 10px solid brown;
            border-radius: 100px; 
            height: 100px; width: 100px;"  >
<pre  style="margin-left:-50px">border: 10px solid brown;
border-radius: 100px;
height: 100px ; width: 100px;</pre>
</div>
</td><td>
<div style="border: 10px solid gold;
            border-radius: 150px; 
            width: 150px;height: 100px;"  >
<pre  style="margin-left:-50px">border: 10px solid gold;
border-radius: 150px;
height: 150px ; width: 100px</pre>
</div>

</tr><tr>

</td><td>
<div style="border: 10px solid bisque;
            border-radius: 50px 0 0 50px; 
            width: 50px;height: 100px;"  >
<pre  style="margin-left:-100px">border: 10px solid bisque;
border-radius: 50px 0 0 50px;
width:50px ; height:100px;</pre>
</div>
</td><td>
<div style="border: 10px solid blueviolet;
            border-radius: 0 50px 50px 0; 
            width: 50px;height: 100px;"  >
<pre  style="margin-left:-100px">border: 10px solid blueviolet;
border-radius: 0 50px 50px 0 ;
width: 50px;height: 100px;</pre>
</div>

</tr><tr>

</td><td>
<div style="border: 1px solid lawngreen;
            border-radius: 50px 50px 0 0; 
            width: 100px;height: 50px;"  >
<pre  style="margin-left:-100px">border: 1px solid lawngreen;
border-radius: 50px 50px 0 0;
width:100px ; height:50px;</pre>
</div>
</td><td>
<div style="border: 2px solid orchid;
            border-radius: 0 0 50px 50px; 
            width: 100px;height: 50px;"  >
<pre  style="margin-left:-100px">border: 2px solid orchid;
border-radius: 0 0 50px 50p ;
width: 100px;height: 50px;</pre>
</div>

</tr><tr>

</td><td>
<div style="border: 5px solid bisque;
            border-radius: 50px 0 50px 0 ; 
            width: 100px;height: 50px;"  >
<pre  style="margin-left:-100px">border: 5px solid bisque;
border-radius: 50px 0 50px 0 ;
width:100px ; height:50px;</pre>
</div>
</td><td>
<div style="border: 3px solid salmon;
            border-radius: 0 50px 0 50px; 
            width: 100px;height: 50px;"  >
<pre  style="margin-left:-100px">border: 3px solid salmon;
border-radius: 0 50px 0 50p ;
width: 100px;height: 50px;</pre>
</div>

</td></tr></tdody></table>

h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
pre {font-size: 18px;}
</style>

<table style="width:100%">
<tbody><tr><td>
<TO><<c>img style="width:150px ; height:150px;<br>
                     
  border-radius: 150px; " src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" /></TO>
</div>
</td><td>
<img style="width: 150px;height: 150px;border-radius: 150px;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" />

</td></tr><tr><td>

<TO><<c>img style="width: 150px ; height: 100px;<br>
                     
border-radius: 150px; " src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" /></TO>
</div>
</td><td>
<img style="width: 150px;height: 100px;border-radius: 150px;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" />

</td></tr><tr><td>

</tdody></table>

h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
pre {font-size: 18px;}
</style>

Edit

#ccs #HTML #text-shadow #文字陰影效果 #CCS text-shadow #shadow effect

text-shadow

<h3>CCS text-shadow 文字陰影效果</h3>
<pre> 文字陰影  {text-shadow: 向右移動 向下移動 模糊度 陰影色 }，
<span id="D1">陰影效果 </span >{ text-align: center;
               font-weight : bold;
               text-shadow:5px 5px 10px black ; }

<span id="D2">字型輪廓</span>{ color: white;
               letter-spacing: 3px;
               font-weight:bold ;
               text-shadow: -2px  0   0 black, 
                             0   2px  0 black,
                             2px  0   0 black, 
                             0   -2px 0 black; }

<span id="D3">活動陰影</span>{ animation: mymove 5s infinite; }
 @keyframes mymove{10% {text-shadow:10px 10px 20px gold;}
                   25% {text-shadow:0px 20px 20px red; } 
                   35% {text-shadow:-10px 10px 20px gold; }  
                   45% {text-shadow:-10px 10px 20px orangered; }
                   55% {text-shadow:-10px 1px 20px orange; } 
                   65% {text-shadow:-10px -10px 20px tomato; }
                   75% {text-shadow:10px -10px 20px darkorange; }
                   85% {text-shadow:0px -10px 20px red; }
                  100% {text-shadow:10px 0px  20px deeppink; } } }
</pre>

#D2 { font-size: 30px ;
       color: white;
       letter-spacing: 3px;
       font-weight:bold ;
       text-shadow: -2px  0   0 black, 
                      0  2px  0 black,
                     2px  0   0 black, 
                      0  -2px 0 black;}

#D3 {font-size: 30px ;
     animation: mymove 5s infinite; }
@keyframes mymove{10% {text-shadow:10px 10px 20px gold;}
                  25% {text-shadow:0px 20px 20px red; } 
                  35% {text-shadow:-10px 10px 20px gold; }  
                  45% {text-shadow:-10px 10px 20px orangered; }
                  55% {text-shadow:-10px 1px 20px orange; } 
                  65% {text-shadow:-10px -10px 20px tomato; }
                  75% {text-shadow:10px -10px 20px darkorange; }
                  85% {text-shadow:0px -10px 20px red; }
                  100% {text-shadow:10px 0px  20px deeppink; } }

pre {font-size: 18px;}
 h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
<style>

<div id="div1">
    
<pre><span id="s0"> 陰影效果</span> { font-size: 30px ;
                 color:orange;
                 font-weight : bold;
                 text-shadow:5px 5px 5px navy; }

<span id="s1"> 加凸文字</span> { font-size: 25px;
               font-weight : bold;
               text-shadow: -2px -2px white, 1px 1px #333; }

<span id="s2"> 加凹文字</span> { font-size: 25px;
                font-weight : bold;
                text-shadow: 2px 2px white, -1px -1px #333; }

<span id="s3">立體文字</span>  { font-size: 50px;
                        color:blue ;
                        font-weight:bold ;
                        text-align: center;
                        text-shadow:2px 2px 2px white,
                                    3px 3px 3px white,
                                    4px 4px 3px white,
                                    5px 5px 3px white,
                                    6px 6px 6px white,
                                    8px 7px 3px black }
</pre>
</div>

#s0 { font-size: 30px ;
      color:orange;
      font-weight : bold;
      text-shadow:5px 5px 5px navy;}

#s1 { font-size: 25px;
      //text-align:center;
      font-weight : bold;
      text-shadow: -2px -2px white, 1px 1px #333;}

#s2 { font-size: 25px;
      font-weight : bold;
      text-shadow: 3px 3px white, -1px -1px #333}

#s3 { font-size: 50px;
      color:blue ;
      font-weight:bold ;
      text-align: center;
      text-shadow:2px 2px 2px white,
                         3px 3px 3px white,
                         4px 4px 3px white,
                         5px 5px 3px white,
                         6px 6px 6px white,
                         8px 7px 3px black}

pre {font-size: 18px;}
</style>

Edit

#ccs #HTML #text-shadow #文字陰影效果 #CCS text-shadow #shadow effect

CSS padding

<h3>CSS padding 內距屬性與用法範例 留白</h3>
<pre>
CSS padding: 留白 邊框內的部分。一個盒子有四個邊，
             所以我們可以對這四個邊的留白逐一設定。

CSS : padding: [上] [右] [下] [左]      padding: [上下] [左右]
      padding: [上] [左右] [下]       　padding: [四個邊同樣値]

CSS padding 的四個邊獨立寫法 : padding-top   ：與上個邊的距離
                              padding-right ：與右方個邊距離
                              padding-bottom：與下方個邊距離
                              padding-left  ：與左個邊的距離

padding 可以的值有 auto、%、em、px、pt </pre>

<br>
padding : 
<input type="number" id="In1" value="10" onchange="change()" min="0" max="50" />
<input type="number" id="In2" value="10" onchange="change()" min="0" max="50" />
<input type="number" id="In3" value="10" onchange="change()" min="0" max="50"/>
<input type="number" id="In4" value="10" onchange="change()" min="0" max="50"/>
<br><br>
<table id="DPP" >
<tbody><tr><td> 
   <div id="TT">padding</div>
</td></tr></tbody></table>

var a= In1.value+"px "+In2.value+"px "+In3.value+"px "+In4.value+"px ";
TT.style.padding = a ;
}
</script>

h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }

pre { font-size: 18px; }
</style>

<h3>CSS margin 屬性用來定義一個區域 </h3>
<pre>
例如 DIV  span img 等 的外邊界距離 ，
CSS : margin : [上] [右] [下] [左]      margin : [上下] [左右]
      margin : [上] [左右] [下]       　margin : [四個邊同樣値]

CSS margin 的四個邊獨立寫法  margin-top：與上方元素的距離
                            margin-right：與右方元素的距離
                            margin-bottom：與下方元素的距離
                            margin-left：與左方元素的距離 margin 
可以的值有 auto、%、em、px、pt </pre>

<br>
margin : 
<input type="number" id="In1" value="10" onchange="change()" />
<input type="number" id="In2" value="10" onchange="change()" />

<br>
<br>
<div id="DPP">
   <div id="TT"><span id="sp">margin</span></div>
</div>

</script>

#DPP {  padding: 0px;
        border: 1px solid;
        width: 200px;
        height:200px;
        margin: 0 auto;
        font-size: 20px;}
 // line-height: 1.5;
 //letter-spacing: 1px;

#TT { margin:10px 10px;}
#sp { border: 1px solid;}

h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }

pre { font-size: 18px; }
</style>

Edit

#ccs #CCS #CCS padding #CCS margin #HTML padding #HTML margin #內距屬性 #外距屬性

CSS word-wrap

<h3>CSS overflow 控制捲軸</h3>

<pre>
捲軸控制在網頁設計上算是滿常碰到的問題，尤其當 div 排版法漸成為主流時， 
善用 ccs overflow 就能有效的的掌握各種捲軸效果。

overflow:       控制當內容超過顯示區域時捲軸的顯示，
overflow-x:     x捲軸的顯示。
overflow-y:     y捲軸的顯示。

捲軸顯示有四種狀態 ﹕
visible(預設):內容完全顯示不嵌入顯示區域。
auto:內容嵌入顯示區域，並視情況顯示水平與垂直捲軸。
scroll:內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動。
hidden:內容嵌入顯示區域，捲軸不會出現。</pre>

<table border="1" style="width:100%">
<tbody><tr><td style="width:50%">
<div id="overflow" >
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IpFKbErhPeVG1R6S23rHkucs4A5KK_oq_uAcCSAT0_LF-o1r-HcfCOU7uqruFbQ5VsnnIXshygbOJCu1vDcptJIc8vVUtxacrb6hIThyphenhypheng5pdUo6cluBfAcZmsL7iIrmjSxv89KtB2aFH/s300/inCollage_20191124_173415963_mh1574588854008.jpg"  />
</div>
</td><td>
<div id="DDf">
<select onchange="Change(this.value)">
   <option value="visible" >overflow:visible</option>
   <option value="hidden"  >overflow:hidden</option>
   <option value="auto" >overflow:auto </option>
   <option value="scroll" >overflow:scroll</option>
   <option value="overflow-x:hidden" >overflow-x:hidden</option>
   <option value="overflow-y:hidden" >overflow-y:hidden</option>
</select>

<pre>
<<c>style>
#outerDiv{ overflow :<span id="span1">visible</span>
           overflowx:<span id="span2">visible</span>  
           overflowy:<span id="span3">visible</span> }

<<c>/style>
</pre>
</div>
</td></tr></tbody></table>

if(x == "overflow-y:hidden"){ overflow.style.overflow='scroll' ;
                              overflow.style.overflowY='hidden' ; }

span1.innerHTML = overflow.style.overflow;
span2.innerHTML = overflow.style.overflowX;
span3.innerHTML = overflow.style.overflowY;

}

</script>

#overflow{ height:200px;width:200px;
           padding:5px;
           border: 3px solid black;
           overflow:visible }

//#DDf{position: fixed;
//top:10px ; left:350px}

input  {cursor:pointer;}

pre { font-size: 18px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

<h3>CSS 文字換行技巧<br>word-break、word-wrap</h3>

<br><br>
<label class="container">
  <input type="radio" name="S1" checked onchange="change(1)">
          word-break: normal</label>
<br>
<label class="container">
  <input type="radio" name="S1" onchange="change(2)" >
          word-break: break-all</label>
<br>

<label class="container">
  <input type="radio" name="S1" onchange="change(3)" >
          word-break: keep-all</label>
<br>
<label class="container">
  <input type="radio" name="S1" onchange="change(4)" >
          word-wrap: normal</label>
<br> 
<label class="container">
  <input type="radio" name="S1" onchange="change(5)" >
          word-wrap: break-word</label>

<div id="DPP" class="narrow">
<br>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
<br><br>
123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
<br><br>
𝓐𝓑𝓒𝓓𝓔𝓕𝓖𝓗𝓘𝓙𝓚𝓛𝓜𝓝𝓞𝓟𝓠𝓡𝓢𝓣𝓤𝓥𝓦𝓧𝓨𝓩𝓪𝓫𝓬𝓭𝓮𝓯𝓰𝓱𝓲𝓳𝓴𝓵𝓶𝓷𝓸𝓹𝓺𝓻𝓼𝓽𝓾𝓿𝔀𝔁𝔂𝔃</div>

if(x==1){ DPP.className="A1" }
if(x==2){ DPP.className="A2" }
if(x==3){ DPP.className="A3" }
if(x==4){ DPP.className="A4" }
if(x==5){ DPP.className="A5" }

}

</script>

.container{font-size: 20px;}

#DPP {
  padding: 10px;
  border: 1px solid;
  width: 400px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px; }

.A1{word-break: normal;}

.A2{word-break: break-all;}

.A3{word-break: keep-all;}

.A4{word-wrap: normal;}

.A5{word-wrap: break-word;}

</style>

Edit

#word-break #word-wrap #word-break: normal #word-break: break-all #word-break: keep-all #word-wrap: normal #word-wrap: break-word #CSS 文字換行技巧 #CSS overflow #CSS 控制捲軸 #CSS overflow #CSS overflow-x #CSS overflow-y #CSS overflow :visible

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

border-style

text-shadow

CSS padding

CSS word-wrap

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

border-style

text-shadow

CSS padding

CSS word-wrap

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單