هل من الممكن لتقليد الحدود ريدج CSS، ولكن مع الالوان؟

Question

وأتمنى أن يكون أساسا "التلال" الحدود نمط ولكن مع الالوان. مع border-style: ridge يبدو أنك لا تستطيع أن تضع ألوان مختلفة في، والمتصفح فقط يستخدم واحدة أخف قليلا واحدة أغمق قليلا من لون معين.

وبلدي الحل الحالي هو هذا، ولكنها ليست مثالية بسبب <div> اضافية

<div id="header">
  <!-- block with border-bottom set to `1px solid #2e3436`-->
</div>
<div style="height: 1px; background-color: #fbe995;"></div>

والبند التالي دون هذا لا يمكن أن يكون أفضل حدودها لتعيين هذا اللون (لديها أساليبها الخاصة وغير منفصل)، بحيث فكرة خارج. هل هناك أي شيء آخر يمكن أن أحاول؟

Answer 1

والمثال لديك يبدو أن أقترح عليك تريد إنشاء خط مخدد كفاصل بين رأس وبقية، بدلا من الحدود مخدد حول عنصر. لماذا لا يتم استخدام hr لذلك، لأن هذا هو الى حد كبير بالضبط ما ل؟

وبعد ذلك يمكنك إعطائها الحدود وتحديد الألوان الخاصة بك على جوانب مختلفة.

Answer 2

وليس في المواصفات لCSS 3 (القسم 8.5.3):

<اقتباس فقرة>   

ولون حدود مرسومة للقيم   من "الأخدود"، "التلال"، "أقحم"، و   'البداية' تعتمد على العنصر   خصائص لون الحدود، ولكن قد واس   اختيار خوارزمية خاصة بها ل   حساب الألوان الفعلية المستخدمة.

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

Answer 3

وليس هناك طريقة رسمية للقيام بذلك، ولكن ربما كنت قد تحاكي الواقع. A الحدود مخدد هو في الحقيقة مجرد الحدود أقحم نفسه الذي يحتوي على الحدود البداية حوله (والذي بدوره هو مجرد الحدود الصلبة مع ألوان الحدود مختلفة قليلا عن يسار / أعلى وأسفل / يمين).

شيء على طول هذه الخطوط يجب أن تحصل على تقريب جيد جدا من ما تريد، أو بالضبط ما كنت تبحث عنه.

 .inset{
      margin:0px;
      border: 1px inset #abc;
 }
 .outset{
      padding:0px;
      border:1px outset #cba;
 }

<div class='outset'>
     <div class='inset'>
          content goes here
     </div>
</div>

Answer 4

<style>
.a
{
        border: solid yellow 2px;
        border-top-color:red;
        border-left-color:red;

}
.b
{
        border: solid red 2px;
        border-top-color:yellow;
        border-left-color:yellow;
}
</style>
<div class='a'>
  <div class='b'>
        some text
  </div>
</div>