首页
网络新闻
seo优化
网络营销
网络推广
建站知识
网络安全
网络编程
网络编程
奇闻怪事
主页
/
建站知识
/
CSS技巧之圆角背景与三角形实现方法
建站知识
2021-07-03 08:43
www.168986.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./xmlrpc.php" /> <link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink./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_, .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='/jianzhan/64456.html'>IE7、IE8、ff下的margin-top问题 折叠margin</a> 下一篇：<a href='/jianzhan/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="/jianzhan/483395.html" title="小企业网页制作 小企业网页制作方法">小企业网页制作 小企业网页制作方法</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483394.html" title="企业网站建设现状">企业网站建设现状</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483375.html" title="网站建设找哪家">网站建设找哪家</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483374.html" title="东莞个人网站制作">东莞个人网站制作</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483373.html" title="武汉企业网站建设">武汉企业网站建设</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483355.html" title="东莞网站设计公司">东莞网站设计公司</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483354.html" title="网站建设案例 网站建设成功案例">网站建设案例 网站建设成功案例</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483338.html" title="郑州app开发价格">郑州app开发价格</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483337.html" title="开发微信小程序的流程">开发微信小程序的流程</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483322.html" title="网站建设的过程">网站建设的过程</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483321.html" title="广州app定制开发">广州app定制开发</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483304.html" title="快速免费建网站">快速免费建网站</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483303.html" title="苏州网站建设公司哪家好">苏州网站建设公司哪家好</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483289.html" title="微网站建设报价">微网站建设报价</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483288.html" title="重庆网站制作">重庆网站制作</a></li> <li><i class="fa fa-caret-right"></i><a href="/jianzhan/483271.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>长沙seo优化</span></h3> <ul id="newlog"> <li><a href="/jianzhan/483395.html">小企业网页制作 小企业网页制作方法</a></li> <li><a href="/jianzhan/483394.html">企业网站建设现状</a></li> <li><a href="/jianzhan/483375.html">网站建设找哪家</a></li> <li><a href="/jianzhan/483374.html">东莞个人网站制作</a></li> <li><a href="/jianzhan/483373.html">武汉企业网站建设</a></li> </ul> </li> <li class="rlist1"> <h3><span>长沙网络营销</span></h3> <ul id="hotlog"> <li><i class='mcolor' >1</i><a href="/jianzhan/478728.html">免费私人服务器</a></li> <li><i class='mcolor' >2</i><a href="/jianzhan/241010.html">南宁企业建站</a></li> <li><i class='mcolor' >3</i><a href="/jianzhan/241016.html">html网站模板建站</a></li> <li><i >4</i><a href="/jianzhan/482364.html">制作网站的公司 网站制作专业的公司</a></li> <li><i >5</i><a href="/jianzhan/237002.html">中国域名服务商有哪些？2021年中国十大域名注册</a></li> </ul> </li> <li class="rlist1"> <h3><span>长沙网站建设</span></h3> <ul id="randlog"> <div id='tag7d466daa538a47ef2cbc73a7f8ee77c4'> <li><a href="/jianzhan/64755.html">网站模板制作中的详情页面的设计方法(图文教程</a></li> <li><a href="/jianzhan/57716.html">html5基础标签(html5视频标签 html5新标签用法)</a></li> <li><a href="/jianzhan/47812.html">网站入门必备！5种方法提高网站登录体验</a></li> <li><a href="/jianzhan/58781.html">HTML5 背景的显示区域实现</a></li> <li><a href="/jianzhan/56250.html">HTML表格标记教程(46):表格的表尾标记</a></li> </div> </ul> </li> </ul> </div> </div> <div id="footerbar"> <div class="wrap"> <p>Copyright © 2016-2025 www.168986.cn <a href="http://www.168986.cn/" target="_blank">狼蚁网络</a> 版权所有 Power by </p> </div> <div id="backtop"><span class="fa fa-space-shuttle fa-rotate-270"></span></div> </body> </html>
