2

このようなCSSを使用して境界線の空白スペースを挿入するためのトリックが必要です。

ボーダーの空白スペースのトリックはありますか？ CSSの場合

このようなCSSボックスシャドウを使用しています

 box-shadow:
        -1px 0px 0px 0px #000,
        0px -1px 0px 0px #000,
        0px 1px 0px 0px #000,
        1px 1px 0px 0px #000

ボーダー/シャドウを写真のように見せるための方法がわかりません。

使用するhtml要素は1つだけです。 <div></div>

何かトリックはありますか？

遊び場： http： //jsfiddle.net/ES66k/

4

4 に答える 4

2

<div>クラス.top-left、.top-right、.bottom-leftおよびで4 を作成できます.bottom-right。それらを絶対にし、コンテナを相対的にします。それらのサイズを変更し、コンテナーの色を bg-color にして、top, right, bottom and leftプロパティを使用して隅に配置します。それらの値は、ボーダー幅を引いたものでなければなりません。3px の境界線を持つ要素の例を次に示します。

HTML:

<div class="box">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</div>

CSS:

.box{
    width: 300px;
    height: 300px;
    border: 3px solid #666;
    position:relative; 
}

.corner{
    width: 10px;
    height: 10px;
    background-color: #fff; 
    position: absolute;
}

.top-left{
    top: -3px;
    left: -3px;
}
.top-right {
    top: -3px;
    right: -3px;
}
.bottom-left{
    bottom: -3px;
    left: -3px;
}
.bottom-right{
    bottom: -3px;
    right: -3px;
}
于 2013-01-30T13:01:58.087 に答える
2

1 つの div のみ: http://jsfiddle.net/ES66k/1/ (Fx18 および chrome でテスト済み)

div {
  width:300px;
  height:170px;
  margin:100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  position: relative;
}

div:after, div:before {
   content: "";
   position: absolute;
   top: -1px;
   width: 20px;
   height: 172px;
   border-top: 40px white solid;
   border-bottom: 40px white solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }

とにかく、固定の高さと背景として単色（白）に依存しているため、少しハックですが、目的には役立つかもしれません。

于 2013-01-30T13:07:16.000 に答える
1

CSS3 属性の border-image を使用してみてください:

以下は、実際に見て試してみることができるデモです: CSS3 border-image

于 2013-01-30T13:08:02.873 に答える
0 
div {
  width:300px;
  height:170px;
  margin:100px;
  position:relative;

 background:#ccc;

}

div:before, div:after {
 content:"";
 position:absolute;
 top:0;
 left:0;
}
div:before {
    width:280px; /*****-20px*****/
    height:168px; /*****-2px*****/

    margin-left:10px;
    border-top:1px solid #f00;
    border-bottom:1px solid #f00;
}
div:after {
    width:298px; /*****-2px*****/
    height:150px; /*****-20px*****/

    margin-top:10px;
    border-left:1px solid #f00;
    border-right:1px solid #f00;
}

デモ: http://jsfiddle.net/ES66k/4/

これで完了です。背景色を設定する必要はありません:D

とにかく@Fabrizio Calderanに感謝します:D

于 2013-01-30T13:56:08.770 に答える