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>
  • 相关阅读:
    AudioToolbox学习(转)
    ios5键盘问题
    何时使用self.
    ios判断邮箱,手机号码,车牌号是否合法(正则表达)
    将图片重新绘制
    在UITableViewCell中获取所在的行数以及去除选中状态
    根据UIView获取其UIViewController
    在iOS中将string转成UTF8编码
    SQL提高性能
    oracle创建口令文件
  • 原文地址:https://www.cnblogs.com/xpengfee/p/828586.html
Copyright © 2011-2022 走看看