我需要绘制这样的图像
就像.. 一个文本框中心和行尾的+标记。我该怎么做..我试过了。但不能..我应该为 + 符号使用图像还是我可以在 css 中做...
或者我应该为它写什么css...
最佳答案
您可以为“框”使用绝对定位的 DIV，并为垂直线和水平线使用两个 DIV。一些(未经测试的)像:
CSS:
.box { position:relative; }
.box-end { position:absolute; border:1px solid red; background:white; overflow:hidden; z-index:400; }
.box-end-v { width:20px; height:40px; }
.box-end-h { width:40px; height:20px; }
.box-end-top { top:0px; left:30px; }
.box-end-bottom { top:80px; left:30px; }
.box-end-left { top:30px; left:0px; }
.box-end-right { top:30px; left:80px; }
.box-line { position:absolute; background:black; z-index:100; }
.box-line-v { top:20px; left:50px; width:1px; height:60px; }
.box-line-h { top:50px; left:20px; width:60px; height:1px; }
HTML:
<div class="box">
<div class="box-end box-end-h box-end-top">T</div>
<div class="box-end box-end-h box-end-bottom">B</div>
<div class="box-end box-end-v box-end-left">L</div>
<div class="box-end box-end-v box-end-right">R</div>
<div class="box-line box-line-v"></div>
<div class="box-line box-line-h"></div>
</div>
但是，我可以建议这样做吗？ http://raphaeljs.com/
关于css - 绘制如图所示的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3262518/