您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

CSS的小三角_html/css_WEB-ITnose

2024/3/24 7:15:56发布18次查看
上三角▲
1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: solid;7 border-color: transparent transparent #000 transparent;
下三角?
1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: solid;7 border-color: #000 transparent transparent transparent;
左三角
1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: dashed solid dashed dashed;7 border-color: transparent #000 transparent transparent;
右三角
1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: dashed dashed dashed solid;7 border-color: transparent transparent transparent #000 ;
三角若需要定位自己添加position
三角的大小更改border-width,颜色更改border-color中的颜色值。
已在ie6/7/8和火狐中测试没有兼容问题,需要注意的是在ie6中不支持border-color里的transparent透明属性,即三角周围会显示成白色,解决方法有两种:
一、如果三角的背景是单色,把border-color里的transparent改成对应的颜色值
二、如果三角的背景不是单色,需要ie6里的css改成支持透明,网上有很多种方法,个人支持使用jsdd_belatedpng,以后会在博文中介绍的。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product