css實現邊框內圓角

有時我們需要乙個容器,只有在內側有圓角,而邊框或四個角在外依然保持直角的形狀,我們可以用兩個div元素來實現這種效果,具體如下:

html**

接天蓮葉無窮碧

映日荷花別樣紅

.container

.container > div

這種方法雖然實現了我們想要的效果,但它需要兩個元素,那我們是否可以只用乙個元素來實現相同的效果呢?

當然也是可以的,我們需要運用到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的顏色設定為兩種不同的顏色來觀察,效果如下:

邊框內圓角

有時我們需要乙個容器，只在內側有圓角，而邊框或描邊的四個角在外部仍然保持直角的形狀，如圖1所示。用兩個元素可以實現這個效果，並沒有特別的。圖1.div1.div2ddddddddddddd 解決方案 若用乙個元素達到此目的，剛好出現圖1的效果。test原因1 描邊 outline屬性 不會跟著元素的...

CSS3利用乙個div實現內圓角邊框效果

首先要清楚的是，box shadow的形狀會隨著border radius變化。下面的例子可以證明 doctype html html lang en head meta charset utf 8 title document title style type text css div.div3 ...

CSS圓角邊框

使用 css3 border radius 屬性，可以給元素製作 圓角 若 border radius 屬性中只指定乙個值，那麼將生成 4 個 圓角。如下所示，則該元素的四個角都是圓角。div 畫圓形的辦法 圓角大小 盒子半徑 box1 box2 屬性 描述border radius 所有四個邊角 ...