div+css无图片实现圆角矩形

来源:互联网 责任编辑:栏目编辑 发表时间:2013-07-01 13:53 点击:

在做页面的时候,很多时候会用圆角矩形来妆点一下,但如果用图片的话,即要用到图片又要用到大量的代码,势必增加了页面的重量

在页面的时候刚好要用到圆角矩形,于是写了以下方法,分享一下

以下为引用的内容:

<!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>div+css无图片实现圆角矩形</title>

<style type="text/css">

<!--

.RoundedCorner{background:url(../images/loginBg2.gif) 0 0 repeat-x;}

b.rtop, b.rbottom{display:block;background:#ffffff;}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden;}

b.r1{margin: 0 3px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background: #DBDBDB;}

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • 扎实基础 9则css网页制作技巧
  • CSS设计符合Web标准的网页表单的几个技巧
  • 技巧:css星级效果总结
  • 用CSS建设网站的实例(9)
  • 提高网站性能:JavaScript+CSS优化的建议(3)
  • CSS制作网页实例:用CSS控制li标记样式
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1