0

コンテナーのサイズに依存するため、幅が可変のボックスがあります。ボックスにはコンテンツがないため、マージンを使用して幅を相対的に定義していますが、機能していません。これは私のコードです：

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  content:"";
  border-top: 2px solid red;
  margin: -20px 0 7px -7px;
  position:absolute;
  width:auto;
}

これは私のフィドルですhttp://jsfiddle.net/x7rrj/3/

右マージンを尊重せずに赤い境界線がボックスの外に出る方法に注意してください。幅を自動に設定すると、赤い境界線はまったく表示されません。これをCSSだけで解決することはできますか?

ありがとうございました。

4

3 に答える 3

0

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

http://jsfiddle.net/x7rrj/16/

を使用position:absoluteして線を配置しているためtop、rightとを使用leftして位置と幅を制御することもできます。

.box:before {
  border-top: 2px solid red;
  content: "";

  padding: 0 100%;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}
于 2014-07-25T04:53:34.387 に答える
0

わかりました、エドワードから与えられたアイデアのおかげで答えを見つけました。この問題は、余白を上、左、右に置き換えることで解決しました。

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  width: auto;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}
于 2014-07-25T05:16:54.257 に答える