Question

我想知道这是否有可能。我的客户希望这样的边界围绕订单确认页面。

我正在使用此网站的语义UI，网格/细分的代码：

    <div class="ui grid">
        <div class="eleven wide computer eleven wide tablet sixteen wide mobile column">
            <div class="ui top attached header">
                <h3>Large box</h3>
            </div>
            <div class="ui bottom attached segment">
                ...
            </div>
        </div>
        <div class="five wide computer four five tablet sixteen wide mobile column">
            <div class="ui top attached header">
                <h3>Small box</h3>
            </div>
            <div class="ui bottom attached segment">
                ...
            </div>
        </div>
    </div>

任何想法如何制作这样的边界？

Answer 1

你可以引入两个相同大小的div，并给它们一个border和border-radius。唯一的问题是在两个div重合的角落里，不会有任何边界半径。

＆＃13;

:nmap K m'a<CR><Esc>`'

＆＃13;

.back{position:absolute;border:10px solid green;border-radius:10px;}
.front{margin:10px;position:absolute;background:white; border:1px solid black;}
.big{top:0;left:0;width:200px;height:200px;}
.small{top:0;left:200px;width:100px;height:100px;}

＆＃13;

Answer 2

你可以使用box-shadow和一些负边距来重叠边缘：

（This flex version的灵感来自http://codepen.io/gc-nomade/pen/HKEpo）

＆＃13;

h3,
p {
  margin: 0;
  padding: 5px;
}
.ui.grid {
  margin: 1em;
  display: flex;
  padding: 0;
}
.ui.grid .eleven {
  flex: 11;
}
.ui.grid .five {
  flex: 5;
}
.ui.top,
.ui.bottom {
  border: 1em solid white;
  box-shadow: -3px -3px green, inset 0 0 2px;
  border-radius: 5px 0 0 0;
  background: white;
  position: relative;
  z-index: 1;
}
.ui.top {
  border-bottom: 0;
}
.ui.bottom {
  border-top: 0;
  box-shadow: -3px 3px green, 3px 3px green, inset 0 0 2px;
  margin-top: -6px;
  border-radius: 0 0 5px 5px;
}
.column + .column .ui.bottom {
  box-shadow: 3px 3px green, inset 0 0 2px;
  position: relative;
}
.column + .column .ui.bottom:after {
  content: '';
  position: absolute;
  margin: 1em;
  padding: 4px;
  top: 100%;
  left: -2em;
  background: white;
  border-radius: 50%;
  box-shadow: inset 3px 3px green, -3px -3px white
}
.column + .column .ui.top {
  border-radius: 0 5px 0 0;
  z-index: 0;
  box-shadow: 3px -3px green, -9px -3px green, inset 0 0 2px;
}

＆＃13;

<div class="ui grid">
  <div class="eleven wide computer eleven wide tablet sixteen wide mobile column">
    <div class="ui top attached header">
      <h3>Large box</h3>
    </div>
    <div class="ui bottom attached segment">
      <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples,
        rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum
        iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p>
      <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples,
        rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum
        iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p>
      <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples,
        rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum
        iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p>
      <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples,
        rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum
        iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p>
      <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples,
        rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum
        iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p>
    </div>
  </div>
  <div class="five wide computer four five tablet sixteen wide mobile column">
    <div class="ui top attached header">
      <h3>Small box</h3>
    </div>
    <div class="ui bottom attached segment">
      <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples,
        rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum
        iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p>
    </div>
  </div>
</div>

＆＃13;

注意只要第2列更短，这就有效：（

CSS在两个不同大小的框周围平滑边框

2 个答案: