圆角边框和自适应按钮的制作

Bertha 。 2021-09-14 03:58 335阅读 0赞

圆角边框和自适应按钮的制作,如图1-1。

![1342958752_9359.png][]

图1-1 圆角边框和自适应按钮

**1、圆角边框的制作**

**1.1 圆角边框HTML代码**

<div class="rounded-box">
        
        <div class="rounded">
            <div class="c tl"></div>
            <div class="c tr"></div>
        </div>
        
        	
        <div class="content">
            圆角边框内容区域
        </div>
        
        
        <div class="rounded">
            <div class="c bl"></div>
            <div class="c br"></div>
        </div>
    </div>

**1.2 圆角边框CSS样式**

/*圆角框*/
    .rounded-box{
    	background-color:#ffffff;
    	border:1px solid #E7E7E7;
    	width:225px;
    	margin-bottom:10px;
    }
    
    .rounded-box .content{
    	padding:10px;
    }
    
    .rounded-box .rounded{
    	clear: both;
        height: 6px;
    }
    
    .rounded .c{
    	background: url("/images/rounded.gif") no-repeat scroll 0 0 transparent;
        font-size: 1px;
        height: 6px;
        width: 6px;
        overflow: hidden;
        position: relative;
    }
    
    .rounded .tl{
    	background-position: left top;
        float: left;
        left: -1px;
        top: -1px;
    }
    
    .rounded .tr{
    	background-position: right top;
        float: right;
        right: -1px;
        top: -1px;	
    }
    
    .rounded .bl{
    	background-position: left bottom;
        float: left;
        left: -1px;
        top: 1px;
    }
    
    .rounded .br{
    	background-position: right bottom;
        float: right;
        right: -1px;
        top: 1px;
    }

**2、自适应按钮的制作**

**2.1 自适应按钮HTML代码**

自适应按钮：
    <a class="g-btn" id="" href="javascript:;" title=""  ><em id="" title="" class="">保存</em><b></b></a>
    <a class="g-btn" id="A1" href="javascript:;" title=""  ><em id="Em1" title="" class="">下载文件</em><b></b></a>

**2.2 自适应按钮CSS样式**

/*自适应按钮*/
    .g-btn, .g-btn em, .g-btn b {
        background: url("/images/btn.gif") no-repeat scroll 0 0 transparent;
        border: medium none;
        cursor: pointer;
        display: inline-block;
        font-size: 12px;
        height: 23px;
        line-height: 23px;
        line-height: 26px\0;
        vertical-align: middle;
    }
    
    .g-btn {
        background-position: -5px -25px;
        margin: 0 4px;
        padding-left: 5px;
        text-decoration:none;
    }
    
    .g-btn em {
        background-position: 0 0;
        font-style: normal;
        color:#000000;
        padding: 0 4px;
    }
    
    .g-btn b {
        background-position: 0px -25px;
        width: 5px;
    }

**3、附件**  
（1）圆角图片

![1342959432_1496.gif][]

（2）自适应按钮图片

![1342959470_7249.gif][]

[1342958752_9359.png]: https://img-my.csdn.net/uploads/201207/22/1342958752_9359.png
[1342959432_1496.gif]: https://img-my.csdn.net/uploads/201207/22/1342959432_1496.gif
[1342959470_7249.gif]: https://img-my.csdn.net/uploads/201207/22/1342959470_7249.gif