html 中怎么画斜线？

html-css06

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并不理想，最好不要用。

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

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