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

最新推荐文章于 2021-06-03 04:08:03 发布

pan_junbiao

最新推荐文章于 2021-06-03 04:08:03 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：我の原创 CSS3 文章标签： class div javascript scroll float html

本文链接：https://blog.youkuaiyun.com/pan_junbiao/article/details/7773114

我の原创同时被 2 个专栏收录

610 篇文章

订阅专栏

CSS3

15 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS实现圆角边框效果及制作自适应按钮的方法。包含详细的HTML结构与对应的CSS样式代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

图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）圆角图片