如何使用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中的图像制作自定义边框角？

回答

相关问题