如何使用css/html中的圖像製作自定義邊框角？

有沒有什麼好的方法可以讓我自定義角落？如何使用css/html中的圖像製作自定義邊框角？

高度會改變取決於文本里面有多少，寬度可以不變，不在乎。

HTML

<table class="npc_chat_div" style="width: 80%;" cellspacing="0" cellpadding="0" border="0"><tbody><tr> 
    <td style="width:11px;"><div class="t1" style="display:block;width:45px;height:47px;position:absolute;top:28px;"></div></td> 
    <td style="width:85px;"><div class="t2" style="display:block;width:85px;height:31px;"></div></td> 
    <td style="width:100%;"><div class="t3" style="display:block;width:100%;height:11px;"></div></td> 
    <td style="width:11px;"><div class="t4" style="display: block;width: 47px;height: 45px;position: absolute;top: 28px;right: 8px;"></div></td> 
    </tr><tr class="m_tr"> 
    <td class="m1"></td> 
    <td colspan="2" class="m2"> 

<div class="m3" style="overflow:auto;background:transparent;border:none;min-height:12px;height:100%;"><span> 
<p> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br></div> 

    </td> 
    <td class="m4"></td> 
    </tr><tr> 
    <td class="b1" style="width:11px;"><div style="display:block;width:11px;height:24px;"></div></td> 
    <td class="b2" style="width:85px;"><div style="display:block;width:85px;height:24px;"></div></td> 
    <td class="b3" style="width:100%;"><div style="display:block;width:100%;height:24px;"></div></td> 
    <td class="b4" style="width:11px;"><div style="display:block;width:11px;height:24px;"></div></td> 
    </tr> 
</tbody></table>

CSS

.npc_chat_div_r td, .npc_chat_div td { 
    vertical-align: bottom !important; 
} 
.npc_chat_div_r .t3, .npc_chat_div .t3 { 
    color: #002bb8 !important; 
    text-align: right; 
    font-size: 80%; 
} 
.npc_chat_div_r .m3, .npc_chat_div .m3 { 
    padding: 4px 6px 4px 6px; 
} 
.npc_chat_div_r .t3 > a, .npc_chat_div .t3 > a { 
    color: #002bb8 !important; 
} 
.npc_chat_div_r .t1, .npc_chat_div .t1 { 
    background: url('http://i.imgur.com/uWGaaat.png'); 
} 
.npc_chat_div_r .t2, .npc_chat_div .t2 { 
    background: url('http://i.imgur.com/phPB10t.png'); 
} 
.npc_chat_div_r .t3, .npc_chat_div .t3 { 
    background: url('http://i.imgur.com/2fIrT0n.png'); 
} 
.npc_chat_div_r .t4, .npc_chat_div .t4 { 
    background: url('http://i.imgur.com/48YiCrA.png'); 
} 
.npc_chat_div_r .m1, .npc_chat_div .m1 { 
    background: url('http://i.imgur.com/JuJ5shQ.png'); 
} 
.npc_chat_div_r .m4, .npc_chat_div .m4 { 
    background: url('http://i.imgur.com/QcpyKdi.png'); 
} 
.npc_chat_div_r .b1, .npc_chat_div .b1 { 
    background: url('http://i.imgur.com/hcl2E9G.png'); 
} 
.npc_chat_div_r .b2, .npc_chat_div .b2 { 
    background: url('http://i.imgur.com/U6N8SN3.png'); 
} 
.npc_chat_div_r .b3, .npc_chat_div .b3 { 
    background: url('http://i.imgur.com/U6N8SN3.png') repeat-x; 
} 
.npc_chat_div_r .b4, .npc_chat_div .b4 { 
    background: url('http://i.imgur.com/ePuqEJF.png'); 
} 
/** Plain style **/ 
.npc_chat_div_r a { 
    text-decoration: underline !important; 
} 
.npc_chat_div_r p { 
    margin: 0px; 
} 
.npc_chat_div_r span.pl { 
    font-style: normal !important; 
    font-weight: bold 
} 
.npc_chat_div_r span.pl>span.i { 
    font-style: italic; 
    font-weight: normal !important 
} 
.npc_chat_div_r .m3 { 
    font: 11px/14px Tahoma, sans-serif; 
} 
/** Tibia style */ 
.npc_chat_div a { 
    color: #A8E051 !important; 
    text-decoration: underline !important; 
} 
.npc_chat_div b { 
    color: #25FFBA; 
} 
.npc_chat_div p { 
    margin: 0px; 
} 
.npc_chat_div span.pl a { 
    color: #3D7F8E !important; 
} 
.npc_chat_div span.pl b, .npc_chat_div span.pl i { 
    color: #3D7F8E; 
    font-style: normal; 
} 
.npc_chat_div span.pl { 
    color: #3D7F8E; 
} 
.npc_chat_div span.pl > span.i { 
    font-style: italic; 
} 
.npc_chat_div .m2 { 
    background: #050F17; 
} 
.npc_chat_div .m3 { 
    color: #A8E051; 
    font: bold 11px/14px Tahoma, sans-serif; 
    scrollbar-shadow-color: #1D1D1D; 
    scrollbar-highlight-color: #434343; 
    scrollbar-face-color: #444444; 
    scrollbar-drakshadow-color: #1D1D1D; 
    scrollbar-3dlight-color: #949494; 
    scrollbar-arrow-color: #8E8E8E; 
    scrollbar-track-color: #373837; 
    padding: 1em; 
}

繼承人的部分效果，我想完成的任務。它不一定是表格。

https://jsfiddle.net/su6wbgd2/

來源

2016-12-26 Tafonath

我強迫它工作，可能是壞的方式，但仍然...

HTML

<div class="m3" style="overflow:auto;background:transparent;border:none;min-height:12px;height:100%;"><span> 
<p> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span> 
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span> 
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br></div> 

    </td> 
    <td class="m4"></td> 
    </tr><tr> 
    <td class="b1" style="width:11px;"><div></div></td> 
    <td class="b2" style="width:85px;"><div style="display:block;width:85px;height:24px;"></div></td> 
    <td class="b3" style="width:100%;"><div style="display:block;width:100%;height:24px;"></div></td> 
    <td class="b4" style="width:11px;"><div></div></td> 
    </tr> 
</table>

CSS

.npc_chat_div_r td, .npc_chat_div td { 
    vertical-align: bottom !important; 
} 
.npc_chat_div_r .t3, .npc_chat_div .t3 { 
    color: #002bb8 !important; 
    text-align: right; 
    font-size: 80%; 
} 
.npc_chat_div_r .m3, .npc_chat_div .m3 { 
    padding: 4px 6px 4px 6px; 
} 
.npc_chat_div_r .t3 > a, .npc_chat_div .t3 > a { 
    color: #002bb8 !important; 
} 
.npc_chat_div_r .t1, .npc_chat_div .t1 { 
    background: url('http://i.imgur.com/uWGaaat.png') no-repeat; 
} 
.npc_chat_div_r .t2, .npc_chat_div .t2 { 
    background: url('http://i.imgur.com/WcihOkH.png') no-repeat; 
} 
.npc_chat_div_r .t3, .npc_chat_div .t3 { 
    background: url('http://i.imgur.com/2fIrT0n.png') repeat-x; 
} 
.npc_chat_div_r .t4, .npc_chat_div .t4 { 
    background: url('http://i.imgur.com/48YiCrA.png') no-repeat; 
} 
.npc_chat_div_r .m1, .npc_chat_div .m1 { 
    background: url('http://i.imgur.com/JuJ5shQ.png') repeat-y; 
} 
.npc_chat_div_r .m4, .npc_chat_div .m4 { 
    background: url('http://i.imgur.com/QcpyKdi.png') repeat-y; 
} 
.npc_chat_div_r .b1, .npc_chat_div .b1 { 
    display: block; 
    position: relative; 
    top: -34px; 
} 
.npc_chat_div_r .b1, .npc_chat_div .b1 > div { 
    background: url('http://i.imgur.com/hcl2E9G.png') no-repeat; 
    width: 45px; 
    height: 47px; 
    display: block; 
    position: relative; 
} 
.npc_chat_div_r .b2, .npc_chat_div .b2 { 
    background: url('http://i.imgur.com/U6N8SN3.png') repeat-x; 
} 
.npc_chat_div_r .b3, .npc_chat_div .b3 { 
    background: url('http://i.imgur.com/U6N8SN3.png') repeat-x; 
} 
.npc_chat_div_r .b4, .npc_chat_div .b4 > div { 
    display: block; 
    width: 45px; 
    height: 47px; 
    background: url('http://i.imgur.com/ePuqEJF.png') no-repeat; 
    position: relative; 
    top: -36px; 
    right: 34px; 
} 

/** Plain style **/ 
.npc_chat_div_r a { 
    text-decoration: underline !important; 
} 
.npc_chat_div_r p { 
    margin: 0px; 
} 
.npc_chat_div_r span.pl { 
    font-style: normal !important; 
    font-weight: bold 
} 
.npc_chat_div_r span.pl>span.i { 
    font-style: italic; 
    font-weight: normal !important 
} 
.npc_chat_div_r .m3 { 
    font: 11px/14px Tahoma, sans-serif; 
} 
/** Tibia style */ 
.npc_chat_div a { 
    color: #A8E051 !important; 
    text-decoration: underline !important; 
} 
.npc_chat_div b { 
    color: #25FFBA; 
} 
.npc_chat_div p { 
    margin: 0px; 
} 
.npc_chat_div span.pl a { 
    color: #3D7F8E !important; 
} 
.npc_chat_div span.pl b, .npc_chat_div span.pl i { 
    color: #3D7F8E; 
    font-style: normal; 
} 
.npc_chat_div span.pl { 
    color: #3D7F8E; 
} 
.npc_chat_div span.pl > span.i { 
    font-style: italic; 
} 
.npc_chat_div .m2 { 
    background: #050F17; 
} 
.npc_chat_div .m3 { 
    color: #A8E051; 
    font: bold 11px/14px Tahoma, sans-serif; 
    scrollbar-shadow-color: #1D1D1D; 
    scrollbar-highlight-color: #434343; 
    scrollbar-face-color: #444444; 
    scrollbar-drakshadow-color: #1D1D1D; 
    scrollbar-3dlight-color: #949494; 
    scrollbar-arrow-color: #8E8E8E; 
    scrollbar-track-color: #373837; 
    padding: 1em; 
}

小提琴： https://jsfiddle.net/su6wbgd2/1/

來源

2016-12-26 12:40:03 Tafonath

您鏈接到小提琴使用圖像達到的效果。看到這個image

如果你不介意一個角落有點複雜的事情，你可以用CSS來實現。

這裏有CodePen一個很好的例子，通過IM Skeer所有信貸追溯到他/她：

body { 
 
    background-color: #000; 
 
    color: #fff; 
 
} 
 
.container { 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
div.bite { 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    background-color: #000; 
 
    height: 200px; 
 
    width: 200px; 
 
    border: solid white 4px; 
 
    padding: 35px; 
 
} 
 
.top, 
 
.bottom { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.top:before, 
 
.top:after, 
 
.bottom:before, 
 
.bottom:after { 
 
    content: " "; 
 
    position: absolute; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: #000; 
 
    border: solid white 4px; 
 
    border-radius: 15px; 
 
} 
 
.top:before { 
 
    top: -35px; 
 
    left: -35px; 
 
} 
 
.top:after { 
 
    top: -35px; 
 
    right: -35px; 
 
    box-shadow: inset 1px 1px 1px white; 
 
} 
 
.bottom:before { 
 
    bottom: -35px; 
 
    left: -35px; 
 
} 
 
.bottom:after { 
 
    bottom: -35px; 
 
    right: -35px; 
 
    box-shadow: inset 1px 1px 1px white; 
 
}

<div class="container"> 
 
    <div class="bite"> 
 
    <div class="top">&nbsp;</div> 
 
    <p>Anything you like to put in here</p> 
 
    <div class="bottom"></div> 
 
    </div> 
 
</div>

這是鏈接到

原來 CodePen頁

來源

2016-12-26 04:25:18

如何使用css/html中的圖像製作自定義邊框角？

回答

相關問題