html 中怎么画斜线?

html 中怎么画斜线?,第1张

可以用不同的方式画,一种是使用css样式:先画一条横线或竖线,然后将这条线旋转一定角度得到斜线。代码如下:

<style>

#book{width:300pxheight:20pxborder-bottom:1px solid #000000-webkit-transform: rotate(45deg)/*Safari 4+,Google Chrome 1+ */-moz-transform: rotate(45deg)/*Firefox 3.5+*/filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45)} </style><div id="book"></div>

另外一种需要使用canvas标签,通过js实现:先画一块画板,再通过两点定位直接在画板上画线。代码如下:

<canvas id="myline" style="width:500pxheight:500px">

</canvas>

<script>

var c=document.getElementById("myline")

var ctx=c.getContext("2d")

ctx.beginPath()

ctx.moveTo(0,0)

ctx.lineTo(300,150)

ctx.stroke()

</script>

HTML标签中<HR>标签可以帮你在每行文字下面画条横线,具体实现方法:

<HR>标签的属性介绍:

none:无样式;dotted:点线;dashed:虚线;solid:实线

double:双线;groove:槽线;ridge:脊线;inset:内凹;outset:外凸。

1、dotted:点线

<HR style="border:3 dotted #ff0033" width="100%" SIZE=3>

2、dashed:虚线

<HR style="border:3 dashed #ff0033" width="100%" SIZE=3>

3、solid:实线

<HR style="border:3 solid #ff0033" width="100%" SIZE=3>

4、double:双线

<HR style="border:3 double #ff0033" width="100%" SIZE=3>

5、groove:槽线

<HR style="border:6 groove #ff0033" width="100%" SIZE=6>

6、ridge:脊线

<HR style="border:6 ridge #ff0033" width="100%" SIZE=6>

7、inset:内凹

<HR style="border:6 inset #ff0033" width="100%" SIZE=6>

8、outset:外凸

<HR style="border:6 outset #ff0033" width="100%" SIZE=6>

温馨提示:

通过实践5—8并不理想,最好不要用。

两头渐变透明 纺锤形 右边渐变透明 左边渐变透明 立体效果 钢针效果

备注:这几种效果不适合表内嵌套存在,例句写在表外


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6147017.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存