用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>

尝试在ie8上实现纯css的圆角

纯css实现在ie8下的圆角 本文可以说几乎没有什么
  • ljx1044680698
  • ljx1044680698
  • 2014年11月25日 00:05
  • 3053

CSS3 border-radius实现边框圆角

border-radius实现边框圆角   这是css3的属性 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius...
  • wangnanwlw
  • wangnanwlw
  • 2016年08月09日 14:48
  • 837

Css暴力绘制圆角矩形

Css3.0中有border-radius;属性可以绘制,当圆角设置为整个border一半大小的时候,还可以画出圆和椭圆。 这里讲一下一种暴力绘制的思路 其实方法很简单,圆角矩形和普通矩形的区别主...
  • u011718707
  • u011718707
  • 2016年08月16日 11:15
  • 267

CSS学习(六)-css圆角边框高级效果、边框阴影效果(上)

一、理论: 1.border-radius: a.表格应用圆角:表格必须使用border-collapse属性为separate,表格圆角才能正常显示 b.圆形:元素的宽度和高度相同,圆角的半径...
  • bwshqh
  • bwshqh
  • 2016年03月04日 01:05
  • 1654

带图标的搜索框 border-radius详解

简单的样式学习,border-radius
  • mingzaiwang
  • mingzaiwang
  • 2015年12月16日 16:06
  • 2039

CSS3黑科技 - 内凹圆角

CSS3 黑科技 - 内凹圆角 - 径向渐变实现圆角,大家一定都会做,border-radius, 内凹圆角如何实现?可以拿个白色圆盒子盖住方形盒子的大半边实现,但是这样,是不透明的,背景发生改变时,...
  • qq_16415157
  • qq_16415157
  • 2016年10月14日 21:02
  • 4364

CSS3圆角边框

本文介绍border-radius的使用、应用、特殊圆形的制作等!
  • macanfa
  • macanfa
  • 2016年06月12日 13:04
  • 1071

css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

1.圆角效果(border-radius)
  • bymyself11
  • bymyself11
  • 2016年07月19日 15:49
  • 3149

CSS3:垂直居中&圆角矩形

1.如果垂直居中vertical-align:middle;不起作用的话,可以考虑让显示的内容以表格的形式显示。代码如下: #content{ width: 300px; heigh...
  • luohuaxinyue
  • luohuaxinyue
  • 2015年12月28日 11:55
  • 1007

css解决ios端按钮和输入框自带圆角的问题

请在这里查看示例 ☞ borderRadius示例问题重现在ios端,我们不想使用按钮或输入框自带的圆角样式,改如何取消呢?问题解决 源码如下 ...
  • u011500781
  • u011500781
  • 2016年12月29日 14:29
  • 2891
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用CSS实现无图片圆角框
举报原因:
原因补充:

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