PHP & JavaScript Room :: 設置サンプル

実行結果

【参照】Transcorners — Cornerus Pride is there *scared*

//round all corners with 10
$('example2').makeRounded();
//round top left corner with grey border and 20 pixel radius
$('example3').makeRounded('top left', {borderColor: '#777', radius: 20});
//round all top corners with 10
$('example4').makeRounded('top');
//round all top and bottom right cornerslinear transition
$('example5').makeRounded('top, bottom right', {transition: fx.linear});
So we can set sides as a comma separated string. We can not have different corners on the same side: 10 pixel bottom left and 20px bottom right — that's impossible.

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Transcorners | 角丸ボックス作成ツール | PHP & JavaScript Room</title>
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <script type="text/javascript" src="/module/include/topic/roundcornerbox/opt.js"></script>
      <script type="text/javascript" src="/module/include/topic/roundcornerbox/Transcorners.js"></script>
      <script type="text/javascript">
         window.onload=function(){
            $('example2').makeRounded();
            $('example3').makeRounded('top left', {borderColor: '#777', radius: 20});
            $('example4').makeRounded('top');
            $('example5').makeRounded('top, bottom right', {transition: fx.linear});
            $('content').makeRounded('top right', {radius: 10, transition: fx.linear, borderColor: "#555"});
            $('content').makeRounded('bottom left', {radius: 100});
            $('error').makeRounded({radius: 20});
            $('howto').makeRounded('top left', {radius: 10, transition: fx.linear, borderColor: "#555"}); 
            $('howto').makeRounded('bottom right', {radius: 100});
            var z = function() {
               new fx.Height($('stretch'), {duration: 300}).custom(80, 230);
               new fx.Height($('stretch2'), {duration: 300}).custom(80, 230);
            }.delay(500);
            
            var z = function() {
               new fx.Opacity($('stretch'), {duration: 500}).custom(0, 1);
               new fx.Opacity($('stretch2'), {duration: 500}).custom(0, 1);
            }.delay(700);

         }.delay(10);
      </script>
      <style type="text/css">
         .inner {
            z-index:30;
            position:relative;
            color:#fff;
         }
         #example2,#example3,#example4,#example5{
            width:50%; /* 幅 */
         }
         #example2{ padding:5px 20px; margin:0 0 30px 0;  background:#333; display:block; text-align:left;}
         #example2 .inner div{color:#888;  font-weight:bold;}

         #example3{ padding:20px; margin:0 0 30px 0;  background:#444; display:block; text-align:left;}
         #example3 .inner div{color:#AAA;  font-weight:bold;}

         #example4{ padding:10px 20px; margin:0 0 30px 0;  background:#555; display:block; text-align:left;}
         #example4 .inner div{color:#CCC;  font-weight:bold;}

         #example5{ padding:20px; margin:0 0 30px 0;  background:#666; display:block; text-align:left;}
         #example5 .inner div{color:#FFF;  font-weight:bold;}
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <p>【参照】<a href="http://inviz.ru/moo/transcorners/">Transcorners &#8212; Cornerus Pride is there *scared*</a></p>
      <div style="background-color:#000; padding:1em;">
         <div id="example2">
            <div class="inner">
               <div>//round all corners with 10</div>
               $('example2').makeRounded();
            </div>
         </div>

         <div id="example3">
            <div class="inner">
               <div>//round top left corner with grey border and 20 pixel radius</div>

               $('example3').makeRounded('top left', {borderColor: '#777', radius: 20});
            </div>
         </div>

         <div id="example4">
            <div class="inner">
               <div>//round all top corners with 10</div>
               $('example4').makeRounded('top');
            </div>
         </div>

         <div id="example5">

            <div class="inner">
               <div>//round all top and bottom right cornerslinear transition</div>
               $('example5').makeRounded('top, bottom right', {transition: fx.linear});
            </div>
         </div>
      </div>

      <div style="width:50%; border-style: none solid; border-color: -moz-use-text-color rgb(84, 98, 83); border-width: 0pt 1px; margin: 10px; padding: 0pt 20px; background-color: rgb(256, 255, 155);"><b style="margin: 0pt -21px 0px; display: block; background-color: rgb(255,255,255); z-index: 1; position: relative;"><b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(84, 98, 83) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 14px; margin-right: 14px;"></b>
      <b style="border-left: 3px solid rgb(84, 98, 83); border-right: 3px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 11px; margin-right: 11px;"></b>
      <b style="border-left: 2px solid rgb(84, 98, 83); border-right: 2px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 9px; margin-right: 9px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 8px; margin-right: 8px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 7px; margin-right: 7px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 6px; margin-right: 6px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 5px; margin-right: 5px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 4px; margin-right: 4px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 3px; margin-right: 3px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 3px; margin-right: 3px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 2px; margin-right: 2px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 2px; margin-right: 2px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b>
      </b>
      So we can set sides as a comma separated string. We can not have different corners on the same side: 10 pixel bottom left and 20px bottom right &#8212; that's impossible.<b style="margin: 0px -21px 0pt; display: block; background-color: rgb(255,255,255); z-index: 1; position: relative;"><b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 2px; margin-right: 2px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 2px; margin-right: 2px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 3px; margin-right: 3px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 3px; margin-right: 3px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 4px; margin-right: 4px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 5px; margin-right: 5px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 6px; margin-right: 6px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 7px; margin-right: 7px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 8px; margin-right: 8px;"></b>
      <b style="border-left: 2px solid rgb(84, 98, 83); border-right: 2px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 9px; margin-right: 9px;"></b>
      <b style="border-left: 3px solid rgb(84, 98, 83); border-right: 3px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 11px; margin-right: 11px;"></b>
      <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(84, 98, 83) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 14px; margin-right: 14px;"></b>
      </b>
   </body>
</div>