博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS--border小三角[兼容IE6的边框透明效果]
阅读量:7043 次
发布时间:2019-06-28

本文共 1305 字,大约阅读时间需要 4 分钟。

 border:20px solid transparent;
 _border-color:tomato;
 _filter:chroma(color=tomato);
 
width:0;
height:0;
overflow:hidden;
display: inline-block;
 
注意:当前层的背景色在IE6浏览器,不会显示,可以在外面加一个层,再加背景颜色。
 
/************例子 例子例子例子例子例子例子***********/
<div class="box">
<span class="borderConrner"></span>
</div>
<style>
.borderConrner{border-color: transparent; _border-color: tomato; _filter: chroma(color=tomato); border-width: 7px 13px; border-style: solid; border-bottom-color: #8ecb92; display: inline-block; width: 0; height: 0; overflow: hidden;
}
.box{background:#f00;
float:left;
}
</style>
------------文档如下------------------------

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 

<html xmlns=" ">
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style> 
.borderConrner{border-color: transparent; _border-color: tomato; _filter: chroma(color=tomato); border-width: 7px 13px; border-style: solid; border-bottom-color: #8ecb92; display: inline-block; width: 0; height: 0; overflow: hidden; 
} 
.box{ width:100px; height:200px; border:1px solid #f60; margin:0 auto; text-align:center;/*background:#f00;*/} 
</style> 
</head> 
<body> 
<div class="box"> 
<span class="borderConrner"></span> 
</div> 
</body> 
</html>

转载于:https://www.cnblogs.com/dingyuanxin/p/3951847.html

你可能感兴趣的文章
AGC006C Rabbit Exercise
查看>>
2019.1.7 Russia temperature control demo
查看>>
前端学HTTP之内容协商
查看>>
关于C#的数据绑定,存取数据库实例详解 (二)
查看>>
2017年计划
查看>>
一般对话框,单选复选对话框
查看>>
Java ExecutorService 的几种线程池比较
查看>>
个人最终总结
查看>>
关于vs2010开发的ASP项目部署到XPSP2系统上出现找不到Reportviewer.XX.文件的解决方案...
查看>>
CSS中style用法详解
查看>>
Exception in thread "main" org.hibernate.MappingException: Unknown entity: com.mao.PersonSet
查看>>
序列终结者
查看>>
以python为例讲解闭包机制
查看>>
MongoDB:mongodb的索引操作
查看>>
【酷熊科技】工作积累 ----------- Unity3D
查看>>
Python格式化字符串、占位符、合并数组
查看>>
Python--day72--ajax完整版
查看>>
require循环依赖
查看>>
svg_path
查看>>
Java中数据表的建立
查看>>