zoukankan      html  css  js  c++  java
  • css无图片圆角效果

    不知为何,现在的美工都喜欢弄圆角。之前的网站也弄过圆角,当时做法现在感觉确实太笨了:1用图片;2用Table 背景色嵌套出来
    这两个做法不仅增加客户端下载数据量,而且改起来也很麻烦。所以综合网上的资料整了个不用图片的单纯css的圆角效果,个人感觉还不错:

    看下代码吧:
     1<html>
     2<head>
     3<title>css圆角效果</title>
     4<style type="text/css">
     5div.RoundedCorner{background: #FFCB2D; width:150px;}
     6b.rtop, b.rbottom{display:block;background: #FFF}
     7b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #FFCB2D}
     8b.r1{margin: 0 5px}
     9b.r2{margin: 0 3px}
    10b.r3{margin: 0 2px}
    11b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
    12table.content{border:0px;height:100px; font-family:Tahoma; font-size:9.5pt;color:#363A36;}
    13
    </style>
    14</head>
    15<body>
    16<div class="RoundedCorner">
    17<class="rtop"><class="r1"></b><class="r2"></b><class="r3"></b><class="r4"></b></b>
    18<table class="content">
    19    <tr>
    20        <td>圆角效果</td>
    21    </tr>
    22    <tr>
    23        <td>bbbbbbbbbbbb</td>
    24    </tr>
    25    <tr>
    26        <td>cccccccc</td>
    27    </tr>
    28    <tr>
    29        <td>dddddddddd</td>
    30    </tr>
    31    <tr>
    32        <td>eeeeeeeeeee</td>
    33    </tr>
    34</table>
    35<class="rbottom"><class="r4"></b><class="r3"></b><class="r2"></b><class="r1"></b></b>
    36</div>
    37</body>
    38</html>
  • 相关阅读:
    技术转型之路开启
    kotlin入门 (教程难点)
    linux入门
    Code-Breaking Puzzles做题记录
    bugku-login4-CBC字节翻转攻击
    bugku-就五层你能解开吗WP
    上海市数学教材
    书目推荐
    Zeta(2) 有图版
    UnitTest测试框架全栈详解(十)
  • 原文地址:https://www.cnblogs.com/xpengfee/p/828586.html
Copyright © 2011-2022 走看看