回答:
はい:outline
プロパティを使用します。それはあなたの境界の外の第二の境界として機能します。注意してください、それは、マージン、パディング、ドロップシャドウを使って不安定な方法で相互作用する可能性があります。一部のブラウザでは、ブラウザ固有のプレフィックスも使用する必要がある場合があります。それを確実にピックアップするために:-webkit-outline
など(特にWebKitはこれを必要としませんが)。
これは、特定のブラウザーのアウトラインを切り離したい場合(たとえば、アウトラインをドロップシャドウと組み合わせる場合など)にも役立ちます。WebKitでは、アウトラインはシャドウの内側にあります。FireFoxでは、外にあるので-moz-outline: 0
、美しいCSSドロップシャドウの周囲にぎこちない線が表示されないようにするのに役立ちます)。
.someclass {
border: 1px solid blue;
outline: 1px solid darkblue;
}
編集:一部の人々はoutline
、IE <8ではうまく動作しないと述べています。IE <8のサポートは、実際に行うべきことではありません。
outline
CSS2以来存在しています。
これは非常に可能です。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>
それはあなたが探しているものですか?
border-radius
、内側の境界の半径を1ピクセルずつ小さくしてみてください。これにより、2つの丸みを帯びた境界間のギャップがほとんど目立たなくなります。
bottom:1px
はなく使用することheight:100%
:)
別の方法は使用すること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>
こちらの例をご覧ください。
CSS仕様内で利用可能なさまざまな境界線スタイルを試しましたか?ニーズに対応できるボーダースタイルはすでに2つあります。
border-style: ridge;
または
border-style: groove;
輪郭は良いですが、すべての境界線が必要な場合のみです。
下か上だけにしたい場合は、
<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>
これがお役に立てば幸いです。
サポートされていない問題のあるアウトラインを使用する代わりに、
例:
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):
"エンボス加工"とは、2つの異なる色で互いの周りに2つの境界線を意味する場合、outline
プロパティ(outline-left
、outline-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
、このためには、同様に(ridge
、outset
およびinset
)が、彼らは私の経験でブラウザ間で変化する傾向があります。
border : black white;
、同時に連続して見える1つの境界線に2つの異なる色を定義するようなものだと思います。
outline
ますが、IE <8でうまく機能しません
ことはできませんが、あなたはどうかを確認しなければならないborder-style
ような値inset
、outset
またはいくつかの他には、あなたが望む効果を達成...(でも、私はそれを疑います...)
CSS3にはborder-imageプロパティがありますが、ブラウザーからのサポートについてはまだ知りません(詳細についてはhttp://www.css3.info/preview/border-image/を参照)。
あなたは使うことができます
<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>