用代码做边框斜角怎么做

html-css012

用代码做边框斜角怎么做,第1张

css实现斜角原理：

把border进行旋转：

border: 2px solid #FFF

-webkit-transform: rotate(204deg)

预览效果页面：

http://each.sinaapp.com/game/index.html

<style>

#book{

width:300pxheight:20pxborder-bottom:2px 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>

当然方法还有很多种，比如用满边框，再在上面叠加一个小一点的满边框就出来斜线了。

有是有，CSS3的-moz-transform: rotate(deg)可实现文本旋转，但目前仅有极少的浏览器支持，并且也不完善，有的只能显示水平和垂直，不能倾斜。HTML5也许可以，但都是超前的技术了，你这种情况，用图片替换吧。文本可以用CSS移除屏幕。