- friendship connection
自由淘
午梅
万德尼科
爱特流体控制有限公司
ccie real lab
大连鲁班软件有限公司
富地机械制造有限公司
尚和会馆
css圆角矩形的另类做法
今天发现了一个实现圆角矩形的另类做法。很好用哦,代码简洁,不用图片,不用JS,也不用cs3的样式的圆角矩形,可以用css随便变换颜色。它兼容各种浏览器。将一个小点文字放大变成了弧形,放到四个角落。每个角落用绝对位置,并且用Arial字体(Arial字体因为它是使用最安全)。如果你想调整圆角弧度的大小,不防试试用css调整一下各种属性。
今天发现了一个实现圆角矩形的另类做法。这是一个没有用图片和cs3的样式的圆角矩形。可以用css随便变换颜色。它兼容各种浏览器。将一个小点文字放大变成了弧形,放到四个角落。每个角落用绝对位置,并且用Arial字体(Arial字体因为它是使用最安全)。如果你想调整圆角弧度的大小,不防试试用css调整一下各种属性。
Html
<div class="round_rectangle"> <em id="ctl"><b>•</b></em> <em id="cbl"><b>•</b></em> <em id="ctr"><b>•</b></em> <em id="cbr"><b>•</b></em>
<p> 今天发现了一个实现圆角矩形的另类做法。
这是一个没有用图片和cs3的样式的圆角矩形。它兼容各种浏览器。
将一个小点文字放大变成了弧形,放到四个角落。
每个角落用绝对位置,并且用Arial字体(Arial字体因为它是使用最安全)。如果你想调整圆角弧度的大小,不防试试用css调整一下各种属性。</p>
</div>
Css
<style>
.round_rectangle {
background:#ecbd61;
color:#000000;
margin:5em auto;
position:relative;
width:250px;
}
#ctl, #cbl, #ctr, #cbr {
background:#fff;
color:#9CAF9C;
font-style:normal;
height:20px;
overflow:hidden;
position:absolute;
width:20px;
z-index:1;
}
#ctl {
left:0;
top:0;
}
#cbl {
bottom:0;
left:0;
}
#ctr {
right:0;
top:0;
}
#cbr {
bottom:0;
right:0;
}
.round_rectangle em b {
color:#ecbd61;
font-family:arial;
font-size:150px;
font-weight:normal;
line-height:40px;
position:absolute;
}
#ctl b {
left:-8px;
}
#ctr b {
left:-25px;
}
#cbl b {
left:-8px;
top:-17px;
}
#cbr b {
left:-25px;
top:-17px;
}
.round_rectangle p {
font-size:12px;
padding:10px 15px;
position:relative;
z-index:100;
text-align:justify;
}
</style>
上一篇:网站设计中的色彩设计—色调
下一篇:css 代码简练的圆角矩形
- 热点文章
- 10个很棒CSS3的技巧
- 30个强大的html5 css3表单设计教程
- 11个非常棒的CSS3实现的图片画廊
- 10个纯CSS3图片画廊及滑块
- CSS3开发工具收集
- CSS3模拟实现太阳系
- 47个惊人的CSS3动画演示
- 完全用CSS3画的机器猫,你相信吗?
- CSS中的行为——expression
- CSS文字控制之letter-spacing和word-spacing
- 一个tableless的CSS表单设计
- css给容器和图片添加阴影效果
- 关于if条件注释 <!--[if IE]> <!--[if !IE]>
- css 代码简练的圆角矩形
- css给你灵感—用css做的翻页书
- CSS菜单列表设计
- css给你灵感—CSS渐变文本效果
- 10个 DIV CSS常见错误 看看你犯了几个
- 2009年1月css设计赏析
- 用CSS实现动态显示的五角星级效果

您的网站是否有联系页面?我无法定位它,但是,我想向您发送电子邮件。我已经有了一些创意,为您的博客,你可能会在听证会感兴趣。无论哪种方式,伟大的网站,我期待着看到它随着时间的推移。
太神奇了!这个博客看起来就像是我的旧!这是一个完全不同的话题,但它具有几乎相同的布局和设计。颜色极好的选择!
整个事情的宏伟计划,您的安全方面的努力和辛勤工作的一个B + 。你在哪里实际上是错位的,我亲自结束了在您的详细资料。这是说,魔鬼在细节... ...它不能在这一点上更正确的。说到这里,请允许我向你透露究竟是什么做的工作。您的文字实际上是真正有说服力的,这也许就是为什么我努力发表评论。我真的不使其经常习惯了这样做的。其次,虽然我可以很容易发现的跨越,你来了,我不相信你似乎连接您的详细资料,使实际的最终结果如何。现在我将产生您的问题,但希望你在未来更好地链接事实。