蝕刻周圍的框

我在那裏我已經通過將#bbb線和#fff線創建的「蝕刻」垂直線框旁邊彼此用CSS邊框：蝕刻周圍的框

div#product_details_separator { 
    height:100px; 
    width:0px; 
    border-left:1px solid #bbb; 
    border-right:1px solid #fff;

蝕刻立式行：

有誰知道我怎麼能給這個盒子的整個邊框這個相同的蝕刻效果？

來源

2016-03-13 Steve

你能發佈HTML/CSS不同的特殊效果？如果我不必從頭開始做所有事情，速度會更快。 – zer00ne

您可以申請box-shadow來達到蝕刻效果。 See the DEMO

CSS

.box { 
    border: 1px solid #fff; 
    box-shadow: 0 0 0 1px #bbb; 
}

來源

2016-03-13 07:48:17 Morven

擊敗我24秒，所以我刪除了我的並加註了你的。 – zer00ne

謝謝@ zer00ne :) – Morven

什麼你試圖做聽起來有點像插圖邊框樣式，這可能是值得探討。但是，要添加第二層邊框，可以使用大綱屬性。這使您可以指定直接圍繞邊界的輪廓。

border: 1px solid #bbb; 
outline: 1px solid #fff;

來源

2016-03-13 08:01:12 whiterabbit25

你有幾個有趣的（很少使用）樣式設置邊框w3c doc

結合它們，你可以在你的要求實現了一些有趣的變化

注意，灰色的顏色計算自動。另請參見第4例，實現了從通用的標準

div { 
 
    width: 100px; 
 
    height: 80px; 
 
    display: inline-block; 
 
} 
 
.one { 
 
    border: groove 20px lightblue; 
 
} 
 
.two { 
 
    border: ridge 20px lightgreen; 
 
} 
 
.three { 
 
    border: inset 20px tomato; 
 
} 
 
.four { 
 
    border-top: groove 20px tomato; 
 
    border-left: groove 20px tomato; 
 
    border-right: ridge 20px tomato; 
 
    border-bottom: ridge 20px tomato; 
 
}

<div class="one"></div> 
 
<div class="two"></div> 
 
<div class="three"></div> 
 
<div class="four"></div>

來源

2016-03-13 09:53:35 vals

蝕刻周圍的框

回答

相關問題