CSS3 border凹陷该如何编写？

Question

本人新手，请问各位大神，如此，该如何编写CSS3 ？ （我说的是蓝色的部分） 谢谢了~~

ringa_lee · Answer

我的想法：絕對定位+after/before偽類實現,大致實現的效果如下：

TZ可以參考給的demo自行修改一下：線上demo

天蓬老师 · Answer

如果換個思路的話，可以把那個圓的margin設定成背景色，然後蓋住右側，這樣看上去就像是凹進去的效果了。

怪我咯 · Answer

先更正一樓的答案，after/before是偽元素而不是偽類，這個很重要，不能把這個弄混淆了，如果是我我會用一個大圓覆蓋長條，再用小圓覆蓋大圓就好了

巴扎黑 · Answer



<頭>
    
    <標題>css

<正文>
<風格>
#a {
    寬度：150px；
    高度：300px；
    背景：徑向漸層（左上角的圓圈，
    透明 15px，#e6e4b7 0) 左上角，
    徑向漸層（右上角的圓圈，
            透明 15px，#e6e4b7 0) 右上角，
    徑向漸層（右下角的圓圈，
            透明 15px，#e6e4b7 0) 右下角，
    徑向漸層（左下角的圓圈，
            透明 15px，#e6e4b7 0) 左下角；
    背景大小：50% 50%；
    背景重複：不重複；
    內邊距：20 像素 24 像素 22 像素 20 像素；
}
#b{
    顯示：塊；
    背景：徑向漸層（左上角的圓圈，
    透明 15px，紅色 0) 左上角，
    徑向漸層（右上角的圓圈，
            透明 15px，紅色 0) 右上角，
    徑向漸層（右下角的圓圈，
            透明 15px，紅色 0) 右下角，
    徑向漸層（左下角的圓圈，
            透明 15px，紅色 0) 左下；
    背景大小：50% 50%；
    背景重複：不重複；
    寬度：100%；
    高度：100%；
    內邊距：2px；
}
#b：之前{
    內容： ””;
    寬度：100%；
    高度：100%；
    顯示：塊；
    背景：徑向漸層（左上角的圓圈，
    透明 15px，#e6e4b7 0) 左上角，
    徑向漸層（右上角的圓圈，
            透明 15px，#e6e4b7 0) 右上角，
    徑向漸層（右下角的圓圈，
            透明 15px，#e6e4b7 0) 右下角，
    徑向漸層（左下角的圓圈，
            透明 15px，#e6e4b7 0) 左下角；
    背景大小：50% 50%；
    背景重複：不重複；
}

CSS3 border凹陷该如何编写？

全部回覆(4)我來回復