CSS技巧之圆角背景与三角形实现方法

网站建设 2021-07-03 08:43www.dzhlxh.cn网站建设

的确, 它们都可以通过图片来实现, 但, 抛开用代码实现可以减小图片加载量不说, 当你遇到三角形或圆角背景下还有一层非纯色背景时, 你又不得不考虑IE6 png兼容问题, 嗯, IE6,万恶之源. 此时, CSS三角形及圆角背景将是上佳选择.
查看演示

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="author" content="Mr.Think青鸟" /> <meta name="keywords" content="Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者,Bluebirdsky" /> <meta name="description" content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." /> <link rel="pingback" href="http://mrthink.net/xmlrpc.php" /> <link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" /> <title>CSS技巧之圆角背景与三角形@Mr.Think</title> <style> /*reset css*/ body{background:#888;font-size:0.8em;letter-spacing:1px;font-family:\5fae\8f6f\96c5\9ed1; line-height:1.8em} div,em,p{margin:0;padding:0} input{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle} h1{font-size:1em; font-weight:normal} h1 a{ padding:2px 3px;background:#047; color:#fff; text-decoration:none} h1 a:hover{background:#a40000; color:#fff; text-decoration:underline} h3{margin:1em auto; position:relative;color:#888; font-weight:bold;font-size:1em} .triangle{margin:20px} .round{margin:0 20px} .box{padding:10px;background:#cf6} /*round*/ .r_top, .r_bottom {display:block; background:transparent; font-size:1px}/*左上右上角和左下右下角的容器*/ .r_a, .r_b, .r_c, .r_d {display:block; overflow:hidden}/*四个圆角*/ .r_a, .r_b, .r_c{height:1px} .r_b, .r_c, .r_d{background:#cf6} .r_a {margin:0 5px} .r_b {margin:0 3px; border-width:0 2px} .r_c {margin:0 2px} .r_d {height:2px; margin:0 1px} /*triangle*/ .triangle em{display:block;width:0;height:0;font-size:0;line-height:0;border-width:40px;border-style:solid;border-color:#cf6 #fff #39c #ffc;_filter:chroma(color=#000000)/*色度滤镜,让IE6实现透明borderColor.滤镜的颜色值不可简写* </div>
        <script>cambrian.render('body')</script>
        <div class="imoney"> 
          </div>
        <div class="nextlog"> 上一篇：<a href='/wangzhan/64456.html'>IE7、IE8、ff下的margin-top问题 折叠margin</a> 
          下一篇：<a href='/wangzhan/64458.html'>CSS中右对齐float:right换行的解决办法</a>  </div>
        <div class="link-box">
          <h3>网站设计</h3>
          <ul class="ullist4">
            <li><i class="fa fa-caret-right"></i><a href="/wangzhan/479896.html" title="商城网站建设怎样建">商城网站建设怎样建</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479895.html" title="免费制作自己的网站">免费制作自己的网站</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479894.html" title="企业网站建设的一般要素">企业网站建设的一般要素</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479893.html" title="如何搭建自己的网站">如何搭建自己的网站</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479892.html" title="网站建设的主要工作流程">网站建设的主要工作流程</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479891.html" title="开发一个网站的过程是什么">开发一个网站的过程是什么</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479890.html" title="如何创建一个自己的网站">如何创建一个自己的网站</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479871.html" title="网站栏目名称">网站栏目名称</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479869.html" title="时间同步服务器地址">时间同步服务器地址</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479854.html" title="移动端手机网站制作">移动端手机网站制作</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479853.html" title="百度k站：百度K站的原因">百度k站：百度K站的原因</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479852.html" title="可外链网盘：支持外链的网盘有哪些">可外链网盘：支持外链的网盘有哪些</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479851.html" title="百度指数会员：如何利用百度指数会员">百度指数会员：如何利用百度指数会员</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479836.html" title="电信虚拟主机：电信虚拟主机的优势">电信虚拟主机：电信虚拟主机的优势</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479834.html" title="穷站长：搜索引擎优化是提高网站流量的方法">穷站长：搜索引擎优化是提高网站流量的方法</a></li>
<li><i class="fa fa-caret-right"></i><a href="/wangzhan/479833.html" title="常德网站建设公司：常德网站建设多少钱">常德网站建设公司：常德网站建设多少钱</a></li>

</ul>
        </div>
        <div id="pagenavi"> </div>       
      </div>
    </div>
    <ul id="sidebar">
  <li class="diyarea"> 
    <script src='/plus/ad_js.php?aid=3' language='javascript'></script> </li>
  <li class="rlist1">
    <h3><span>金源码搜索</span></h3>
    <div id="logsearch">
      <form name="keyform" method="get" action="/plus/search.php">
        <input type="hidden" name="pagesize" value="20">
        <input name="q" class="search" type="text" />
        <i class="fa fa-search" onclick="$('form').submit()"></i>
      </form>
    </div>
  </li>
  <li id="blogsort">
    <h3 class="mcolor"><i class="fa fa-folder-open-o"></i><span>金源码导航</span></h3>
  </li>
  <li class="rlist1">
    <h3><span>免费网站源码</span></h3>
    <ul id="newlog">
      <li><a href="/wangzhan/479896.html">商城网站建设怎样建</a></li>
<li><a href="/wangzhan/479895.html">免费制作自己的网站</a></li>
<li><a href="/wangzhan/479894.html">企业网站建设的一般要素</a></li>
<li><a href="/wangzhan/479893.html">如何搭建自己的网站</a></li>
<li><a href="/wangzhan/479892.html">网站建设的主要工作流程</a></li>

</ul>
  </li>
  <li class="rlist1">
    <h3><span>网站模板下载</span></h3>
    <ul id="hotlog">
      <li><i class='mcolor' >1</i><a href="/wangzhan/244607.html">败笔网络安全技术</a></li>
<li><i class='mcolor' >2</i><a href="/wangzhan/96292.html">ai怎么调整画板顺序? ai设置画板顺序的教程</a></li>
<li><i class='mcolor' >3</i><a href="/wangzhan/241010.html">南宁企业建站</a></li>
<li><i  >4</i><a href="/wangzhan/248423.html">网络安全第五空间</a></li>
<li><i  >5</i><a href="/wangzhan/248615.html">网页设计制作详细流程</a></li>

</ul>
  </li>
  <li class="rlist1">
    <h3><span>网站建设</span></h3>
    <ul id="randlog">
          <div id='tag9f7eeff00fa9ad9495fdaba8e635aaaa'>
<li><a href="/wangzhan/56050.html">html meta标签的使用总结(推荐)</a></li>
<li><a href="/wangzhan/121102.html">Win8音乐库没有音乐如何播放本地音乐文件</a></li>
<li><a href="/wangzhan/118095.html">Win10预览版更新下载速度慢如何解决有哪些方法</a></li>
<li><a href="/wangzhan/92862.html">ai怎么绘制美元符号logo?</a></li>
<li><a href="/wangzhan/54479.html">利用哪几种“资源整合”赚钱？ 总结“资源整合</a></li>
    </div>

</ul>
  </li>
</ul>

</div>
</div>
<div id="footerbar">
<div class="wrap">
  <p>Copyright © 2016-2025  www.dzhlxh.cn  <a href="http://www.dzhlxh.cn/" target="_blank">金源码</a> 版权所有 Power by  </p>
  <p>网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板</p>
</div>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<div id="backtop"><span class="fa fa-space-shuttle fa-rotate-270"></span></div>
</body>
</html>