1、dotted【点状】
2、solid【实线】
3、double【双实线】
4、dashed【虚线】
实例一:如果一个CSS这样写:border-style:dotted solid double dashed出来的框就是:上边框是点状,右边框是实线,下边框是双线,左边框是虚线
实例二:如果一个CSS这样写:border-bottom:1px dashed #000000出来的框就是:一条宽度为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>
CSS中dashed和dotted区别如下:
1、组成虚线的方式不同:
两者在CSS中都是“虚线”。其中dashed来自 dash(破折号),由一个个破折号组成的虚线。dotted:来自 dot(点),由一个个点组成的虚线,也称点线。
2、在IE6.0中的表现区别:
在IE6.0中,宽度为1px的dotted和宽度为1px的dashed一样,表现为破折号组成的虚线。当宽度大于1px时,dotted表现为点组成的虚线。
3、在IE7.0中表现区别:
在IE7.0中,如果有4条1px宽度的边和其它任意数值宽度的边同时存在时,1px的dotted表现的和dashed一样,改变上述条件则表现为点组成的虚线。
参考资料来源:百度百科-CSS border-style