用CSS实现无图片圆角框

原创 2006年06月23日 17:28:00

做圆角框比较常见的做法是切割图片法。这样可以产生随心所欲的效果。但是如果要求比较简单,没有时间来割图,是否有更简单的方法呢?答案是肯定的。我们可以用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">&bull;</div></div>
    <div class="bottom-left-corner"><div class="bottom-left-inside">&bull;</div></div>
    <div class="top-right-corner"><div class="top-right-inside">&bull;</div></div>
    <div class="bottom-right-corner"><div class="bottom-right-inside">&bull;</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> <!-- end div.box-contents -->
</div> <!-- end div.rounded-box -->
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

无图片CSS圆角的五个实例

CSS圆角的现实一直是大家所热衷的话题,我们进行CSS布局一直强调语义,强调文档的结构。圆角作为页面的外面表现,应该分离到CSS文件中,可以用图片的形式实现。   也有好多CSSer用XHTML+C...

CSS3无图片实现华丽折页菜单效果(多浏览器兼容)

http://lanfei.sinaapp.com/2012/05/1255.html Finally 最后当然是给出代码和Demo了: CSS部分: body{ ma...

纯CSS3实现(无图片)的彩色条纹电子明信片

使用纯CSS3实现的明信片,未使用图片,比较简洁实用。思路是通过DIV和DIV:after元素叠加而成,DIV:after用来构造一个斜向渐变(linear-gradient方法)彩色条纹,然后放置在...

纯css(无图片)实现带边框三角指示图标

我们在平常的开发过程中经常碰到需要一个三角的指示小图标,

用CSS3实现无图片的百度Logo

看到一些牛逼哄哄的前端牛用纯HTML+CSS实现了HTML5的标志、Opera的标志、遨游的标志。于是自己手痒也想来挑战自己,被我瞄准的是百度。 怎么在网页上实现无图片的百度Logo呢? 思路:百...

无图片的圆角表格

  • 2011-10-25 21:15
  • 665B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)