เส้นขอบสองสี

Question 1

ลูกค้าต้องการเส้นขอบสองสีเพื่อให้ดูนูน ฉันสามารถทำสิ่งนี้ในองค์ประกอบเดียวได้หรือไม่ ฉันหวังว่าจะหลีกเลี่ยงการซ้อนองค์ประกอบ DOM สองรายการที่มีเส้นขอบแยกกัน

Question 2

ใช่: ใช้outlineคุณสมบัติ; มันทำหน้าที่เป็นพรมแดนที่สองนอกชายแดนของคุณ ระวังมันสามารถโต้ตอบในรูปแบบที่ว่องไวด้วยระยะขอบพายและเงาหล่น ในบางเบราว์เซอร์คุณอาจต้องใช้คำนำหน้าเฉพาะของเบราว์เซอร์ด้วย เพื่อให้แน่ใจว่ามันรับมัน: -webkit-outlineและสิ่งที่คล้ายกัน (แม้ว่า WebKit โดยเฉพาะจะไม่ต้องการสิ่งนี้)

นอกจากนี้ยังมีประโยชน์ในกรณีที่คุณต้องการสร้างโครงร่างสำหรับบางเบราว์เซอร์ (เช่นในกรณีนี้หากคุณต้องการรวมโครงร่างกับเงาตกกระทบใน WebKit โครงร่างจะอยู่ภายในเงาใน FireFox จะเป็น ด้านนอกจึง-moz-outline: 0มีประโยชน์เพื่อให้แน่ใจว่าคุณจะไม่ได้รับเส้นที่สวยงามรอบ ๆ เงาของ CSS ที่สวยงามของคุณ)

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

แก้ไข:บางคนตั้งข้อสังเกตว่าoutlineไม่ดีกับ IE <8 แม้ว่านี่จะเป็นเรื่องจริง การสนับสนุน IE <8 ไม่ใช่สิ่งที่คุณควรทำ

Question 3

นี้เป็นไปได้มาก ใช้เล่ห์เหลี่ยม CSS เพียงเล็กน้อย!

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<div class="border">Hi I have two border colors<br />I am also Fluid</div>

ขยายข้อมูลโค้ด

นั่นคือสิ่งที่คุณกำลังมองหา?

Question 4

อีกวิธีหนึ่งคือการใช้box-shadow:

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

ดูตัวอย่างที่นี่

Question 5

คุณได้ลองใช้สไตล์เส้นขอบต่างๆที่มีอยู่ในข้อกำหนด CSS หรือไม่ มีรูปแบบเส้นขอบสองแบบที่อาจรองรับความต้องการของคุณ:

border-style: ridge;

หรือ

border-style: groove;

Question 6

โครงร่างเป็นสิ่งที่ดี แต่เฉพาะเมื่อคุณต้องการให้เส้นขอบอยู่รอบ ๆ

ให้บอกว่าคุณต้องการทำให้เฉพาะด้านล่างหรือด้านบนคุณสามารถใช้ได้

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

และสำหรับด้านล่าง:

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

หวังว่านี่จะช่วยได้

Question 7

แทนที่จะใช้โครงร่างที่ไม่รองรับและมีปัญหาให้ใช้

background-color + padding สำหรับขอบด้านใน
เส้นขอบปกติสำหรับด้านนอก

ตัวอย่าง:

HTML:

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS:

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

ทดสอบ (JSFiddle) :

แสดงข้อมูลโค้ด

img {
  padding: 1px;
  background: yellow;
  border: 1px solid black;
}

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

ขยายข้อมูลโค้ด

Question 8

ถ้าโดยการ "ลายนูน" คุณหมายถึงเส้นขอบสองเส้นที่มีสีต่างกันสองสีแสดงว่ามีoutlineคุณสมบัติ ( outline-left, outline-right.... ) แต่ไม่ได้รับการสนับสนุนในตระกูล IE (กล่าวคือ IE6 และ 7 ไม่รองรับเลย ). หากคุณต้องการสองเส้นขอบองค์ประกอบกระดาษห่อที่สองจะดีที่สุด

หากคุณหมายถึงการใช้สองสีในเส้นขอบเดียวกัน ใช้เช่น

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

มีพิเศษborder-stylesนี้เช่นกัน ( ridge, outsetและinset) แต่พวกเขามีแนวโน้มที่จะแตกต่างกันในเบราว์เซอร์ในประสบการณ์ของผม

Question 9

ไม่ได้ แต่คุณควรตรวจสอบเพื่อดูว่าborder-styleค่าชอบinset, outsetหรืออื่น ๆ ประสบความสำเร็จผลที่คุณต้องการ .. ( ฉันสงสัยมันแม้ว่า .. )

CSS3 มีคุณสมบัติborder-imageแต่ฉันยังไม่รู้เกี่ยวกับการรองรับจากเบราว์เซอร์ (ดูข้อมูลเพิ่มเติมได้ที่http://www.css3.info/preview/border-image/ ) ..

Question 10

เพียงแค่เขียน

style="border:medium double;"

สำหรับแท็ก html

Question 11

คุณสามารถใช้

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
 padding: 4px; outline: 1px solid green;
}

</style>

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-color:yellow;        
      }
    </style>

</head>
<body>
<a target="_blank" href="people.htm">
  <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
  </a>

</body>
</html>

Question 12

สิ่งนี้ก่อให้เกิดผลที่ดี

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>