04/30: Web > スタイルシート > 丸角デザイン
Category: Web dev
Posted by: hajime osako
<html><head><title>test</title> <style type='text/css'> <!-- /*------mini box CSS----- */ .miniBox { width:225px; } .miniBoxTop { } .miniBoxBtm { } .miniBoxBody { padding: 5px; background:url(/images/bg_Box.jpg) repeat-x left top; background-position: 0px -6px; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .cnrA { margin: 0 5px;height:1px;overflow: hidden; background-color:#CCCCCC; } .cnrB { margin: 0 3px;height:1px;overflow: hidden; background:url(/images/bg_Box.jpg) repeat-x left top; background-position: 1px 1px; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .cnrC { margin: 0 2px;height:1px;overflow: hidden; background:url(/images/bg_Box.jpg) repeat-x left top; background-position: 1px -2px; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .cnrD { margin: 0 1px;height:2px;overflow: hidden; background:url(/images/bg_Box.jpg) repeat-x left top; background-position: 1px -3px; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .cnrW { margin: 0px;height:2px;overflow: hidden; background-color:#FFFFFF; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .cnrX { margin: 0 2 0 0px;height:1px;overflow: hidden; background-color:#FFFFFF; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .cnrY { margin: 0 3 0 0px;height:1px;overflow: hidden; background-color:#FFFFFF; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .cnrZ { margin: 0 5 0 0px;height:1px;overflow: hidden; background-color:#CCCCCC; } --> </style> </head> <body bgcolor="#EEEEEE"> <div class="miniBox"> <div class="miniBoxTop"> <div class="cnrA"></div> <div class="cnrB"></div> <div class="cnrC"></div> <div class="cnrD"></div> </div> <div class="miniBoxBody"> TEST TEST<br /> TEST TEST<br /> </div> <div class="miniBoxBtm"> <div class="cnrW"></div> <div class="cnrX"></div> <div class="cnrY"></div> <div class="cnrZ"></div> </div> </div> </body> </html>