ما هي الطريقة الصحيحة لتحديد أسلوب الصور داخل معرض جاري DIV؟

Question

لدي DIV مع معرف "Gallery" وأريد أن أسلوب الصور داخله. على وجه التحديد، أريد أن أعطي كل صورة الحدود الصلص الصلبة 1PX باستثناء في الأسفل لأنها تجلس فوق بعضها البعض، لذلك لا أريد مضاعفة الحدود في الأسفل.

ما كنت مرتبك عنه هو كيفية الاختيار بين عناصر نمط الحدود المختلفة: الحدود، نمط الحدود، عرض الحدود. حاولت هذا:

div#gallery img
{
    border-width:1px;
    border-style:solid;
    border: solid yellow;
    border: 1px 1px 0px 1px;
}

تمكنت من الحصول على حد أصفر مع CSS أعلاه، لكن الحدود تبدو وكأنها حدود 2px - إنها سميكة للغاية - وإلى جانب ذلك، فإن بناء الجملة الذي أستخدمه لا يبدو أنيقا للغاية.

أي توصيات حول كيفية القيام بذلك بشكل أكثر إغاثة / أنيقة؟

Answer 1

أعتقد أن هذه هي أفضل طريقة:

border: 1px solid yellow;
border-bottom: none;

بناء الجملة ل border يذهب الإعلان width style color ويؤثر على حدود الأربعة. بعد ذلك، يمكنك تجاوز الأسفل مرة أخرى لاستخدام أي حدود بالإعلان border-bottom كما لا شيء.

Answer 2

لا أعرف حقا ما إذا كانت هناك طريقة خاطئة للقيام بذلك، لكن لديك أساسا 3 طرق للقيام بذلك:

طريقة 1

border-top: 1px solid yellow;
border-right: 1px solid yellow;
border-left: 1px solid yellow;

الطريقة 2.

border: 1px solid yellow;
border-bottom: 0;

الطريقة 2.

border: 1px solid yellow;
border-bottom: none;

أفضل أن الطريقة الثانية أو الطريقة الثالثة.

(أعرف الطريقة الثانية والطريقة 3 هي نفسها أساسا، لكنني أردت أن أعطي كلا الحلول، حتى تتمكن من اختيار ما تريد، "لا شيء" أو "0").