CSS的小三角_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 12:34:52
asal
1285 orang telah melayarinya

上三角▲

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;
Salin selepas log masuk

下三角?

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;
Salin selepas log masuk


左三角

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;
Salin selepas log masuk


右三角

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 ;
Salin selepas log masuk


三角若需要定位自己添加position

三角的大小更改border-width,颜色更改border-color中的颜色值。

 

 已在IE6/7/8和火狐中测试没有兼容问题,需要注意的是在IE6中不支持border-color里的transparent透明属性,即三角周围会显示成白色,解决方法有两种:

一、如果三角的背景是单色,把border-color里的transparent改成对应的颜色值

二、如果三角的背景不是单色,需要IE6里的CSS改成支持透明,网上有很多种方法,个人支持使用JS??DD_belatedPNG,以后会在博文中介绍的。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan