أتش تي أم أل - إنشاء كتلة

Question

لا بد لي من إنشاء كتلة مثل هذا:

النص البديل http://img689.imageshack.us/img689/5397/samplek.png.

كيف يمكنني أن أفعل هذا بشكل أسرع باستخدام CSS + HTML؟

Answer 1

يجب عليك إنشاء 8 صور مع دعم الشفافية.

4 صور للجوانب: الأعلى، اليسار، اليمين، أسفل

4 صور للزوايا

بالنسبة للجزء الأوسط، يمكنك الحصول على DIV وملء ذلك مع هذا اللون الخلفية.

إذا كنت تتحدث عن طريقة نقية CSS، فأنت بحاجة إلى معرفة أن حالتها الحالية لا تسمح لك بعدم وجود زوايا جولة ولا الظلال بطريقة متصفح عبر.

عندما يكون لديك صورك، يمكنك الغراء معا مثل هذا:

<div style="background: url('/topleft.png') no-repeat;">
  <div style="background: url('/topright.png') right no-repeat;">
    <div style="background: url('/bottomleft.png') bottom no-repeat;">
      <div style="background: url('/bottomright.png') bottom right no-repeat;">

        <div style="padding: 0 5px; background: url('/top.png') repeat-x;">
          <div style="background: url('/bottom.png') bottom repeat-x;">
            <div style="position:relative; left: -5px;
                        background: url('/left.png') repeat-y;">
              <div style="position:relative; left: 10px;
                          background: url('/right.png') right repeat-y;">

                <div style="position:relative; right: 5px;
                            background: #fff68f;">
                   We got it!
                </div>

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

PS نعم، من الجنون، وأنا أعلم.

PS # 2: لجعله "سريع" يمكنك الجمع بينها في بعض الصورة الرئيسية واستفاد من CSS العفاريت تقنية. ولكن بالنسبة لذلك إلى العمل عليك أن تضطر إلى استيعاب مساحة فارغة كافية بين الصور (اقرأ المقال لفهم السبب)، وإلا فيمكن أن تنفجر هذه العطس 9 متداخل أكثر.

Answer 2

يمنحك CSS3 بعض الخيارات الجميلة ولكن معظمها ليس متصفحا معتمدا بعد (مثل خاصية Radius -moz-border-border).

Answer 3

ربما شيء مثل هذا:

<div id="block"></div>

<style type="text/css">
 #block{
  background:transparent url(http://img689.imageshack.us/img689/5397/samplek.png) 0 0 no-repeat;
  height:279px;
  width:222px;
}
</style>