DIV+CSS制作斜线效果记录
2018-06-17 20:56:21来源:未知 阅读 ()
DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。
提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。
上图右边是我们要实现的效果,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
<div id= "box" ></div> <style type= "text/css" > #box{ width : 0px ; height : 0px ; border : 40px solid #000 ; border-top-color : #930 ; border-bottom-color : #0C3 ; border-left-color : #FC0 ; border-right-color : #009 ; } </style> |
在FF IE7 IE8 都显示正常,但在IE6中,却如上图左边所示,中间有差距,因此,需要加一行:
line-height:0px;
最终代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<div id= "box" ></div> <style type= "text/css" > #box{ width : 0px ; height : 0px ; border : 40px solid #000 ; border-top-color : #930 ; border-bottom-color : #0C3 ; border-left-color : #FC0 ; border-right-color : #009 ; line-height : 0px ; } </style> </head> |
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 页面制作之开发调试工具(1) 2018-06-21
- jQuery制作鼠标经过显示图片大图,生成图片tips效果 2018-06-17
- javascript制作公式编辑器,函数编辑器和图形绘制 2018-06-17
- Easyui登陆页面制作 2018-06-17
- 【原创】用JQury来制作星星打分特效功能 2018-06-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash