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> <style> 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>

00

<div id="ff"> <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> <style> #ff div{ width: 80%; //height:80%; margin: 0 auto;} 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>

00

<div id="ff"> <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> <style> #ff div{ width: 80%; //height:80%; margin: 0 auto;} td , div {border-width:5px 5px 5px 5px; padding:15px 15px; 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>

00

<div id="ff"> <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> <style> #ff div{ width: 80%; //height:80%; margin: 0 auto;} td , div {border-width:5px 5px 5px 5px; padding:15px 15px; 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>

00

Edit

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