2つの色の境界線


95

クライアントは、エンボス加工の外観に2つの色の境界線を必要としています。これを1つの要素で実行できますか?個別の境界線を持つ2つのDOM要素を重ねないようにしたいと思っていました。


Javascriptを使用して効果を達成してもよろしいですか?jquery.malsup.com/corner
nopuck4you

回答:


140

はい:outlineプロパティを使用します。それはあなたの境界の外の第二の境界として機能します。注意してください、それは、マージン、パディング、ドロップシャドウを使って不安定な方法で相互作用する可能性があります。一部のブラウザでは、ブラウザ固有のプレフィックスも使用する必要がある場合があります。それを確実にピックアップするために:-webkit-outlineなど(特にWebKitはこれを必要としませんが)。

これは、特定のブラウザーのアウトラインを切り離したい場合(たとえば、アウトラインをドロップシャドウと組み合わせる場合など)にも役立ちます。WebKitでは、アウトラインはシャドウの内側にあります。FireFoxでは、外にあるので-moz-outline: 0、美しいCSSドロップシャドウの周囲にぎこちない線が表示されないようにするのに役立ちます)。

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

編集:一部の人々はoutline、IE <8ではうまく動作しないと述べています。IE <8のサポートは、実際に行うべきことではありません。


27
「IE <8をサポートすることは、実際に行うべきことではありません」の場合は-1 IE6をサポートしていなくてもかまいません。しかし、IE7をサポートしないのはばかげています。技術者以外のユーザーがこれを利用できるサイトはありません
Pekka

6
outlineCSS2以来存在しています。
BoltClock

156
+1はIE 7をサポートしないため、サイトは常に動作し、IE 7で適切に表示されるはずですが、完全なサポートは不要です。特に、2色の境界線の場合はそうです。私は個人的にボックスシャドウやその他の「高度な」機能を使用しています。IE7はボックスシャドウを表示できません。IE7の癖を回避するためだけに、あまり適さず、複雑すぎたり、時代遅れのソリューションを使用したりする理由はありません。
マリアン・タイセン、2011

2
また、設計目的のためにアウトラインプロパティをハックしないように良いアクセシビリティの理由から、このリファレンスを参照してください。outlinenone.comを
ジョエルGlovier

11
注意の言葉は、outlineより用途が少ないですborder。特に、W3Cは次のように述べています(エンファシス鉱山。)
ボブ・スタイン

68

これは非常に可能です。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>

それはあなたが探しているものですか?


確かにそれはトリッキーですが、それは優雅に低下し、私のHTCのストックブラウザー(Android)でも動作します!を使用する場合はborder-radius、内側の境界の半径を1ピクセルずつ小さくしてみてください。これにより、2つの丸みを帯びた境界間のギャップがほとんど目立たなくなります。
インフルエンザ

これはいいね。ちょうど下の境界線のために私のためにうまくいくのでbottom:1pxはなく使用することheight:100%:)
Nick

のパディングがある場合div.border、と同じ寸法の負のマージンを追加すると、div.border:beforeすべてをインラインに保つのに役立つことがわかりました。多分それを行うより良い方法がありますか?jsFiddle
NW Tech

疑似要素を使用する場合は+1。私はこの答えはWilliham Totlandの者よりも優れていると思う
マティアスCánepa

これは素晴らしい!:)
BennKingy

33

別の方法は使用すること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>

こちらの例をご覧ください。


それはアウトライン方法とは異なりボーダー半径で動作するので、私はこれを好む
ヨハン・

18

CSS仕様内で利用可能なさまざまな境界線スタイルを試しましたか?ニーズに対応できるボーダースタイルはすでに2つあります。

border-style: ridge;

または

border-style: groove;

1
これはまさに私が必要としたものでした。(IE8の<fieldset>を修正)
DOOManiac

14

輪郭は良いですが、すべての境界線が必要な場合のみです。

下か上だけにしたい場合は、

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

これがお役に立てば幸いです。


6

サポートされていない問題のあるアウトラインを使用する代わりに、

  • background-color +内部ボーダーのパディング
  • 外側の通常の境界線。

例:

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

TEST(JSFiddle)


うまく機能しますが、背景のあるコンテンツがある場合のみです。
2015年

4

"エンボス加工"とは、2つの異なる色で互いの周りに2つの境界線を意味する場合、outlineプロパティ(outline-leftoutline-right....)がありますが、IEファミリではサポートが不十分です(つまり、IE6および7ではまったくサポートされていません) )。2つの境界線が必要な場合は、2番目のラッパー要素が最適です。

同じ境界線で2色を使用する場合。たとえば

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

そこに特別でborder-styles、このためには、同様に(ridgeoutsetおよびinset)が、彼らは私の経験でブラウザ間で変化する傾向があります。


3
彼が求めているのはborder : black white; 、同時に連続して見える1つの境界線に2つの異なる色を定義するようなものだと思います。
Tarik

1
@ブレイブヤードああ、なるほど。これは理論的には使用できoutlineますが、IE <8でうまく機能しません
Pekka

3
アウトラインしかないことに注意してください...残念ながら、アウトライン左、アウトライン右、アウトライン上、アウトライン下などはありません。
デビッドシェレット

-1

ことはできませんが、あなたはどうかを確認しなければならないborder-styleような値insetoutsetまたはいくつかの他には、あなたが望む効果を達成...(でも、私はそれを疑います...

CSS3にはborder-imageプロパティがありますが、ブラウザーからのサポートについてはまだ知りません(詳細についてはhttp://www.css3.info/preview/border-image/を参照)。


プログラミングの世界では何も不可能なことはありません。Pまあ、いつでもこのステートメントを書くのが好きです:)
Tarik


-1

あなたは使うことができます

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

-2

これは素晴らしい効果を生み出します。

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.