- friendship connection
自由淘
午梅
爱特流体控制有限公司
大连鲁班软件有限公司
圣诞岛海参
富地机械制造有限公司
购物派
华夏红
彩中网
尚和会馆
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 代码简练的圆角矩形
- >> more看看其他人的看法
- 热点文章
- 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实现动态显示的五角星级效果
- css hack 汇总快查
- 什么是CSS hack
- div+css 文字弧形排版
- css给你灵感--css动态图表设计大全
- 超越CSS:WEB设计艺术精髓
