下の画像のような背景画像のある丸コーナーのボックスを表示させるCSSが紹介されています。



設置方法は以下のとおり。

まずは、CSSに以下のコードを記述します。

/*TeachMeJoomla's  flexible rounded corners module CSS*/
 /*image setup */
 div.module-green, div.module-green div{
 background:  url('images/rounded_green.jpg');  /* 背景に使う画像 */
 }
 /*replaced with TeachMeJoomla's single image technique*/
  div.module-green
 {
 padding: 0px 0px 0px 0px;
 margin:0px 0px 0px 0px;
 background-repeat:no-repeat;
 background-position:bottom left;
 height:1%;
 width:auto;
 }
  div.module-green div
 
 {
 margin:0px 0px 0px 13px;
 background-repeat:no-repeat;
 background-position: bottom right;
 padding: 0px 0px 13px 0px;
 width:auto;
 }
 div.module-green div div
 {
   background-position: top right;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
 }
 div.module-green div div div
 {
   margin:0px 13px 0px -13px;
   background-position: top left;
   padding: 13px 0px 0px 13px;
 }
 /*reset nested divs*/
  div.module-green div div div div
 {
 padding:0px 0px 0px 0px;
 margin:0px 0px 0px 0px;
   background:none;
     background-image: none;
     background-position: top left;
     background-repeat: repeat;
     background-color: transparent;
     width:100%;
 }

そして、HTMLでは以下のように記述すればOKです。

<div class="module-green">
       <div>
         <div>
           <div>
           <p>
           Look! I'm a flexible rounded corners box
 with 1 single background image!
           here's more HTML
           </p>
           <ul>
             <li>item</li>
             <li>item</li>
             <li>item</li>
             <li>item</li>
           </ul>         
           </div>
         </div>
       </div>
 </div>

主要ブラウザ(IE6, IE7, Firefox, Opera)で動作を確認できているとのことです。また、確認していませんが、モジュールにも設定できるようです。

• 元記事: CSS Flexible rounded corners box with one (single) background image

次 >