zoukankan      html  css  js  c++  java
  • CSS--border小三角[兼容IE6的边框透明效果]

     border:20px solid transparent;
     _border-color:tomato;
     _filter:chroma(color=tomato);
     
    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- 7px 13px; border-style: solid; border-bottom-color: #8ecb92; display: inline-block; 0; height: 0; overflow: hidden;
    }
    .box{background:#f00;
    float:left;
    }
    </style>
    ------------文档如下------------------------

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <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- 7px 13px; border-style: solid; border-bottom-color: #8ecb92; display: inline-block; 0; height: 0; overflow: hidden; 
    } 
    .box{ 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>
  • 相关阅读:
    2020软件工程02
    自我介绍
    2019年春总结作业
    第十二周作业
    第十一周作业
    第十周作业
    第九周作业
    第八周作业
    第七周学习总结
    第六周学习总结
  • 原文地址:https://www.cnblogs.com/dingyuanxin/p/3951847.html
Copyright © 2011-2022 走看看