css做出圓角矩形邊框
阿新 • • 發佈：2019-01-22
無突出邊框的：
<html> <head> <title>用css做帶圓角的邊框</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <meta name="generator" content="HAPedit 3.1"> <style type="text/css"> body{padding: 20px;background-color: #FFF; font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif} h1,h2,p{margin: 0 10px} h1{font-size: 250%;color: #FFF} h2{font-size: 200%;color: #f0f0f0} p{padding-bottom:1em} h2{padding-top: 0.3em} div#nifty{ margin: 0 10%;background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} </style> </head> <body> <div id="nifty"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <h1>看看是圓角了吧</h1> <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div> </body> </html>
加邊框，做了一點更改。如下
<html> <head> <title>用css做帶圓角的邊框</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="generator" content="HAPedit 3.1"> <style type="text/css"> body{padding: 20px;background-color: #FFF; font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif} h1,h2,p{margin: 0 10px} h1{ font-size: 250%; color: #FFF; } h2{font-size: 200%;color: #f0f0f0} p{padding-bottom:1em} h2{padding-top: 0.3em} div#nifty{ margin: 0 10%; background: #9BD1FA; } b.rtop, b.rbottom{ display:block; background: #FFF; } b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA} b.r1{ margin: 0 5px; background-color: #FF0000; } b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.r1,b.r2,b.r3,b.r4 { border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #FF0000; border-left-color: #FF0000; } b.rtop b.r4, b.rbottom b.r4{ margin: 0 1px; height: 2px; } b.rtop b.r1,b.rtop b.r1{ border-top-width: 1px; border-top-style: solid; border-top-color: #FF0000; } b.rbottom b.r1,b.rbottom b.r1{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FF0000; } #nifty .main { width: 100%; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #FF0000; border-left-color: #FF0000; } </style> </head> <body> <div id="nifty"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <div class="main"> <h1>dfdsfdsfdsf</h1> </div> <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div> </body> </html>
把這裡面的紅色#FF0000，換成想要的邊框顏色。