css實現邊框內圓角
有時我們需要一個容器,只有在內側有圓角,而邊框或四個角在外依然保持直角的形狀,我們可以用兩個div元素來實現這種效果,具體如下:
html代碼
<div class="container">
<div>
接天蓮葉無窮碧
映日荷花別樣紅
</div>
</div>
css部分代碼如下:
.container {
width: 150px;
padding:.8em;
margin:50px auto;
background-color: #655;
}
.container > div {
background: tan;
border-radius: .8em;
padding:1em;
color:white;
}
效果如下圖所示:
這種方法雖然實現了我們想要的效果,但它需要兩個元素,那我們是否可以只用一個元素來實現相同的效果呢?
當然也是可以的,我們需要運用到box-shadow屬性和outline屬性,css代碼如下:
background: tan;
border-radius: .8em;
padding: 1em;
margin:100px auto;
box-shadow: 0 0 0 .6em #655;
outline:.6em solid #655;
效果如下:
令我們感到驚喜的是,outline屬性並不會隨着outline屬性走,但是box-shadow屬性卻可以,當我刪除outline屬性時,效果如下:
刪除box-shadow屬性時,效果如下:
因此我們可以通過把這兩者疊加在一起來實現我們剛開始實現的容器外圍有一層邊框但內側有圓角的效果,爲了讓這種方式的原理體現的更加明顯,我將陰影顏色和outline的顏色設置爲兩種不同的顏色來觀察,效果如下: