用CSS实现无图片圆角框

最新推荐文章于 2021-08-04 09:50:05 发布

空空法师

最新推荐文章于 2021-08-04 09:50:05 发布

阅读量2.5k

点赞数

分类专栏：企业开发编程技术文章标签： css class attributes div firefox html

本文链接：https://blog.csdn.net/snleo/article/details/826171

版权

编程技术同时被 2 个专栏收录

68 篇文章 0 订阅

订阅专栏

企业开发

67 篇文章 0 订阅

订阅专栏

做圆角框比较常见的做法是切割图片法。这样可以产生随心所欲的效果。但是如果要求比较简单，没有时间来割图，是否有更简单的方法呢？答案是肯定的。我们可以用css来达到一定效果。这种方法优点是速度快，而且随时可以变化颜色。缺点是效果比较单调。

把下面的html保存起来就可以了。在IE,firefox下都可以正确显示

<html>
<head>
    <title>
    Rounded Box Demo
    </title>
<style type="text/css">

body {
    background-color: #FFF;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-family: Georgia;
}

div.rounded-box {
    position:relative;
    width: 9em;
    background-color: #C0C0C0;
    margin: 3px;
}

/*********************
GLOBAL ATTRIBUTES
*********************/
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;}

div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#C0C0C0; line-height: 40px;}

/*********************
SPECIFIC ATTRIBUTES
*********************/

div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}

div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}

div.box-contents {
    position: relative; padding: 8px; color:#000;
}

</style>
</head>
<body>
<div class="rounded-box">
    <div class="top-left-corner"><div class="top-left-inside">•</div></div>
    <div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div>
    <div class="top-right-corner"><div class="top-right-inside">•</div></div>
    <div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div>
    <div class="box-contents">
        Text goes here<br>
        Text goes here<br>
        Text goes here<br>
        Text goes here<br>
        Text goes here<br>
        Text goes here<br>
    </div> 
</div> 
</body>
</html>

空空法师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用CSS实现无图片圆角框

做圆角框比较常见的做法是切割图片法。这样可以产生随心所欲的效果。但是如果要求比较简单，没有时间来割图，是否有更简单的方法呢？答案是肯定的。我们可以用css来达到一定效果。这种方法优点是速度快，而且随时可以变化颜色。缺点是效果比较单调。把下面的html保存起来就可以了。在IE,firefox下都可以正确显示 Rounded Box Demo body { backg
复制链接

扫一扫

专栏目录