[html] وضع الحدود داخل div وليس على الحافة



Answers

يمكنك أيضًا استخدام box-shadow مثل:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

مثال هنا: http://jsfiddle.net/nVyXS/ (التمرير لعرض الحدود)

هذا يعمل في المتصفحات الحديثة فقط. على سبيل المثال: لا يوجد دعم IE 8. انظر caniuse.com (ميزة box-shadow) لمزيد من المعلومات.

Question

لدي عنصر <div> وأريد وضع حد له. أعلم أنه يمكنني كتابة style="border: 1px solid black" ، ولكن هذا يضيف 2px إلى أي جانب من div ، وهو ليس ما أريده.

أفضل أن يكون هذا الحد -1 بكسل من حافة div. تبلغ قيمة div نفسها 100 بكسل × 100 بكسل ، وإذا أضفت حدًا ، فحينئذ يجب أن أقوم ببعض الرياضيات لإظهار الحدود.

هل هناك أي طريقة يمكنني بها إظهار الحدود ، وضمان أن يظل المربع 100 بكسل (بما في ذلك الحدود)؟




إذا كنت تستخدم تحجيم المربعات: يعني مربع الحدود ليس فقط الحدود ، والحشو ، والهامش ، إلخ. وسيأتي كل عنصر داخل العنصر الأصل.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}
<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>




أعلم أن هذا الأمر أقدم إلى حد ما ، ولكن بما أن الكلمات الرئيسية "الحدود الداخلية" قد هبطت مباشرة هنا ، أود أن أشارك بعض النتائج التي قد تكون جديرة بالذكر هنا. عندما كنت أقوم بإضافة حدود على حالة التمرير ، حصلت على التأثير الذي يتحدث عنه البروتوكول الاختياري. تتحول الإعلانات الحدودية إلى أبعاد المربع الذي جعلها تقفز. هناك طريقتان أخريان يمكنهما التعامل مع هذا الأمر الذي يعمل أيضًا مع IE7.

1) اجعل الحدود مرفقة بالفعل بالعنصر وقم ببساطة بتغيير اللون. بهذه الطريقة يتم تضمين الرياضيات بالفعل.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) تعويض حدك مع هامش سلبي. سيظل هذا يضيف البيكسلات الإضافية ، لكن وضع العنصر لن يكون سريعًا

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}



ياهو! هذا ممكن حقا. لقد وجدت ذلك.

للحد السفلي:

div {box-shadow: 0px -3px 0px red inset; }

للحد الأعلى:

div {box-shadow: 0px 3px 0px red inset; }



Links