CSS在两个不同大小的盒子周围光滑的边框

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，并给它们一个边框和边框半径。唯一的问题是两个div合在一起的角落里不会有任何边界半径。

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

<div class="big back"></div> 
 
<div class="small back"></div> 
 
<div class="big front"></div> 
 
<div class="small front"></div>

Answer 2

你可以使用箱阴影和一点负利润率的重叠边缘：

（This flex version从http://codepen.io/gc-nomade/pen/HKEpo启发）

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

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

请注意，只要第2列较短，就可以工作:(