DIV+CSS制作斜线效果记录
2018-06-17 19:36:37来源:未知 阅读 ()
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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:如何写出高性能SQL语句
下一篇:度量Web性能的关键指标
- mysql数据备份 2018-06-27
- 使用rmpbuild制作AliSQL数据库rpm软件包 2018-06-17
- 制作联动时,数据绑定combox控件会触发SelectedIndexChanged 2018-06-17
- asp.net 母版-页脚制作 2018-06-17
- 魔兽登陆界面制作 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