六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 117|回复: 0

css 用圆来制作圆角矩形

[复制链接]

升级  81.33%

52

主题

52

主题

52

主题

秀才

Rank: 2

积分
172
 楼主| 发表于 2013-2-7 21:19:30 | 显示全部楼层 |阅读模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title> 用圆来制作圆角矩形 </title><style type="text/css">body,div,p{padding:0;margin:0;}.box{width:300px; margin:10px;}/* 圆的半径为5px 根据需要可以自由改变 */.b_t,.b_t_i,.b_b,.b_b_i{background:url(http://dl.iteye.com/upload/attachment/466587/351b88fe-911f-3f15-96ad-1f02100c7422.png) no-repeat;}.b_t{ background-position:top left; }.b_t_i{ padding:0 5px; background-position:top right;}.b_t_i div{ border-top:1px solid #153de9; height:5px;}.b_m{ border:1px solid #153de9; border-width:0 1px 0 1px; padding:5px 10px; }.b_b{ background-position:bottom left; }.b_b_i{ padding:0 5px; background-position:bottom right;}.b_b_i div{ border-bottom:1px solid #153de9; height:5px; }.b_bg{background:#9dcce7;}</style></head><body><div class="box"> <div class="b_t"><div class="b_t_i"><div class="b_bg"></div></div></div><div class="b_m b_bg"> <p>用圆来制作圆角矩形</p><p>用圆来制作圆角矩形</p><p>用圆来制作圆角矩形</p></div><div class="b_b"><div class="b_b_i"><div class="b_bg"></div></div></div></div></body></html>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表