معظم سيلة فعالة لبناء الظلال مربع مع CSS

Question

وأنا مهتم للعثور على أي وسيلة لخلق الظلال مربع مع المغلق هو الأكثر فعالية. ولكن هذا يعني: سهولة التنفيذ والمرونة والتوافق عبر متصفح.

Answer 1

والبصل السلخ هو قناعتي الشخصية المفضلة.

ويمكن العثور على مثال في هذا alistapart المقالة .

Answer 2

وهذا هو الآن بسيط جدا لتحقيق ما يلي:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

والقيمة الأولى هي الأفقي الإزاحة. القيمة الثانية هي العمودي الإزاحة. ينتشر القيمة الثالثة من طمس الأثر. القيمة الرابعة هي اللون.

وبالإضافة إلى ذلك، يمكنك إضافة قيمة أخرى من inset، الأمر الذي سيجعل من الظل تظهر على الداخل منك منع العنصر:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

وهذا هو الآن دعما جيدا للغاية: https://caniuse.com/#feat=css- boxshadow

Answer 3

والطريقة أجد الأكثر فعالية حاليا هو:

والقواعد CSS المطلوبة:

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

كود HTML التي يتم تطبيق CSS:

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div>

ولقد وجدت من السهل جدا لتنفيذ ومرنة ويعمل نفسه على FF 3، IE 6 و 7.