[Css] كيف يمكنني إضافة ظل صندوق على جانب واحد من عنصر؟


Answers

حلمي ذاتي الصنع سهل التعديل:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

المغلق:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

عرض:
http://jsfiddle.net/jDyQt/103

Question

أحتاج إلى إنشاء ظل صندوقي على بعض عناصر block ، ولكن فقط (على سبيل المثال) على جانبها الأيمن. الطريقة التي أقوم بها هي لفّ العنصر الداخلي box-shadow إلى غلاف خارجي مع padding-right overflow:hidden; بحيث لا يمكن رؤية الجوانب الثلاثة الأخرى للظل.

هل هناك طريقة أفضل لتحقيق ذلك؟ مثل box-shadow-right أليس كذلك؟

تحرير : نوايتي هي إنشاء الجزء الرأسي فقط من الظل. بالضبط نفس ما repeat-y من background:url(shadow.png) 100% 0% repeat-y القاعدة background:url(shadow.png) 100% 0% repeat-y ستفعل.




هذا يمكن أن يكون طريقة بسيطة

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

تعيين هذا إلى أي div




ساعدني هذا الموقع: https://gist.github.com/ocean90/1268328 (لاحظ أنه في هذا الموقع يتم عكس اليسار واليمين اعتبارًا من تاريخ هذا المنشور ... لكنهما يعملان كما هو متوقع). يتم تصحيحها في التعليمات البرمجية أدناه.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>



ما أقوم به هو إنشاء كتلة رأسية للظل ، ووضعها بجوار مكان عنصر الحظر الخاص بي. ثم يتم لف الكتلتين في كتلة أخرى:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

jsFiddle سبيل المثال here .




فقط استخدم :: after أو :: before pseudo element لإضافة الظل. اجعله 1px وضعه على أي جانب تريده. فيما يلي مثال على القمة.

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}
<footer>top only box shadow</footer>