Hai đường viền màu

Khách hàng muốn có hai đường viền màu cho một cái nhìn nổi. Tôi có thể làm điều này trên một phần tử không? Tôi đã hy vọng tránh xếp chồng hai phần tử DOM với các đường viền riêng lẻ.

Đúng: Sử dụng outlinetài sản; nó hoạt động như một biên giới thứ hai bên ngoài biên giới của bạn. Hãy cẩn thận, tho ', nó có thể tương tác một cách nhạy bén với lề, đệm và bóng đổ. Trong một số trình duyệt, bạn cũng có thể phải sử dụng tiền tố dành riêng cho trình duyệt; để đảm bảo rằng nó bắt được nó: -webkit-outlinevà những thứ tương tự (mặc dù WebKit nói riêng không yêu cầu điều này).

Điều này cũng có thể hữu ích trong trường hợp bạn muốn xóa đường viền cho một số trình duyệt nhất định (chẳng hạn như trường hợp bạn muốn kết hợp đường viền với bóng đổ; trong WebKit, đường viền nằm bên trong bóng đổ; trong FireFox thì bên ngoài, vì vậy rất -moz-outline: 0hữu ích để đảm bảo rằng bạn không có một đường thẳng xung quanh bóng đổ CSS đẹp mắt của bạn).

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

Chỉnh sửa: Một số người đã nhận xét rằng outlinekhông tốt với IE <8. Trong khi điều này là đúng; hỗ trợ IE <8 thực sự không phải là điều bạn nên làm.

Điều này là rất có thể. Nó chỉ cần một chút thủ thuật 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>

Có phải đó là những gì bạn đang tìm kiếm?

Một cách khác là sử dụng 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>

Xem ví dụ tại đây.

Bạn đã thử các kiểu đường viền khác nhau có sẵn trong thông số CSS chưa? Đã có hai kiểu viền có thể đáp ứng nhu cầu của bạn:

border-style: ridge;

Hoặc là

border-style: groove;

Phác thảo là tốt, nhưng chỉ khi bạn muốn có đường viền xung quanh.

Cho phép nói nếu bạn muốn đặt nó chỉ ở dưới cùng hoặc trên cùng, bạn có thể sử dụng

<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>

Và cho dưới cùng:

<style>

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

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

Hy vọng rằng điều này sẽ giúp.

Thay vì sử dụng dàn ý không được hỗ trợ và có vấn đề, chỉ cần sử dụng

• background-color + padding cho đường viền bên trong
• đường viền bình thường cho bên ngoài.

Thí dụ:

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;
}

KIỂM TRA (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" />

Nếu theo "dập nổi", bạn có nghĩa là hai đường viền bao quanh nhau với hai màu khác nhau, thì có thuộc outlinetính ( outline-left,outline-right ....) nhưng nó không được hỗ trợ trong họ IE (cụ thể là IE6 và 7 hoàn toàn không hỗ trợ nó ). Nếu bạn cần hai đường viền, phần tử bao bọc thứ hai thực sự sẽ là tốt nhất.

Nếu bạn có nghĩa là sử dụng hai màu trong cùng một đường viền. Sử dụng vd

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

có đặc biệt border-stylesnày là tốt ( ridge, outsetvà inset) nhưng họ có xu hướng khác nhau trên các trình duyệt trong kinh nghiệm của tôi.

Không thể, nhưng bạn nên kiểm tra xem liệu border-stylecác giá trị như inset, outsethoặc một số giá trị khác, có đạt được hiệu quả bạn muốn không .. ( tôi nghi ngờ điều đó .. )

CSS3 có thuộc tính hình ảnh đường viền , nhưng tôi chưa biết về hỗ trợ từ trình duyệt (thông tin thêm tại http://www.css3.info/preview/border-image/ ) ..

Đơn giản chỉ cần viết

style="border:medium double;"

cho thẻ html

Bạn đã có thể sử dụng

<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>

Điều này tạo ra một hiệu ứng tốt đẹp.

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