第一种方法：如果是CSS2.2的话，可以简单写一个制作圆角矩形，分上中下裁成三张图

<title>CSS3实现圆角</title>

 <style type="text/css">

 #box

{

 　　width:200px;

 　　height:30px;

 　　background:url("../images/bt_bottom.jpg") no-repeat left bottom; 

} 

#box h1

{

　　width:200px; 

　　height:20px; 

　　text-indent:-9999px; 

　　background:url("../images/bt_top.jpg") no-repeat left top; 

}

 /*下面这个是中间平铺的图，如果是纯色的话，可以直接写颜色值，也可以直接在上述box的背景上写上背景颜色*/ 

#box div#content

{ 

width:200px;

 height:200px; 

background:url("../images/bt_bg.jpg") repeat-y;

 }

</style> 

</head> 

<body> 

<div id="box"> 

<h1>标题</h1> 

<div id="content"></div> 

</div> 

</body>

 </html>

　　第二种方法：如果是使用CSS实现圆角的话，那么目前最简单的方法就是CSS3中的-moz-border-radius、-webkit-border-radius以及border-radius一起使用效果更佳，目前能支持CSS3的浏览器有IE9及以上版本，google chrome10以上版本，firefox4及以上版本。否则的话，只能使用图片来进行实现了，当然也可以使用css2，但是那个太过于麻烦。

下面我给你一个例子，你可以在以上我提到的相应浏览器中进行浏览，那样效果会更好！

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS3实现圆角</title>

<style type="text/css">

.box

{

　　width:200px;

　　height:200px;

　　background:#09F;

　　-moz-border-radius:8px;/*8px是圆角的角度，值越大则圆角效果越明显，如果修改此项，请修改以下两项的值，使之相同*/

　　-webkit-border-radius:8px;

　　border-radius: 8px;

}

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

请将以上代码复制粘贴后，保存为html文档即可，然后利用目前最新版的浏览器进行浏览即可看到如下效果：

用CSS做圆角矩形的更多相关文章

  1. 如何在html中做圆角矩形和 只有右边的"分隔线"

    这个网站满好的,可以常看看 css-matic中有几个很好的写css可视化的工具 其实做css 版式布局等都可以有工具的 推荐40个优秀的免费CSS工具 debugger正则表达式在线 其实是对(理论 ...

  2. CSS样式做圆角

    我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做:  是什么方式导致这项技术表现得这么了不起呢(What makes this ...

  3. css圆角矩形及去掉空格属性

    css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...

  4. 不用css样式表和背景图片实现圆角矩形，超简洁！

    当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像 ...

  5. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  6. CSS中设置元素的圆角矩形

    圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...

  7. [BOT] 一种android中实现“圆角矩形”的方法

    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...

  8. Android中实现圆角矩形及半透明效果。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们为了美观,有时候需要使用圆角矩形,或半透明之类的效果,在网页设计中很容易实现.但在Android开发中 ...

  9. 解读Unity中的CG编写Shader系列四（unity中的圆角矩形shader）

    转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...

随机推荐

  1. Esper学习之六：EPL语法（二）

    中秋三天,说闲也不闲,调调工作的代码,倒还解决不少问题.不过也是因为最近工作忙的缘故,Esper被我冷落不少日子了,趁着今天最后一天,赶紧写一篇出来. 从上一篇开始说EPL的语法,主要是关于注解的.今 ...

  2. 多线程中的lua同步问题

    最近写paintsnow::start时出现了一个非常麻烦的BUG,程序的Release版本大约每运行十几次就会有一次启动时崩溃(Debug版本还没崩溃过),崩溃点也不固定.经过简单分析之后,确定是线 ...

  3. powershell 将文本转换成表格的还有一种方式

    $text=" 1 梦幻西游 216406 2014-01-21 资料片 2 炉石传说 15905 2014-01-24 公測 3 新大话西游 214465 2002-08-01 公測 4 ...

  4. [置顶] SSO单点登录系列6：cas单点登录防止登出退出后刷新后退ticket失效报500错

    这个问题之前就发现过,最近有几个哥们一直在问我这个怎么搞,我手上在做另一个项目,cas就暂时搁浅了几周.现在我们来一起改一下你的应用(client2/3)的web.xml来解决这个2b问题,首先看下错 ...

  5. ssh整合启动tomcat报java.lang.ClassNotFoundException: org.apache.commons.lang.xwork.StringUtils

    今天搭建了一个ssh项目环境,整合后,访问项目首页,登录不进去,控制台报错,后来调试代码后,在获取数据库数据后,返回到action时,又进入了action导致死循环,其实这里是两个问题,控制台报错如下 ...

  6. kaggle之旧金山犯罪

    kaggle地址 github地址 特点: 离散特征 离散特征二值化处理 数据概览 import pandas as pd import numpy as np # 载入数据 train = pd.r ...

  7. 转：Xshell显示找不到匹配的outgoing encryption算法怎么办

    原文出处:http://www.xshellcn.com/xsh_column/suanfa-bpp.html 由用户反应在使用xshell和xftp连接debian 7时出现找不到匹配的outgoi ...

  8. 解析Xml四种方法

    关键字:Java解析xml.解析xml四种方法.DOM.SAX.JDOM.DOM4j.XPath [引言] 目前在Java中用于解析XML的技术很多,主流的有DOM.SAX.JDOM.DOM4j,下文 ...

  9. 数据结构算法应用C++语言描述——（1）C++基础知识

    一.二维数组 (1)二维数组的列是固定时,行未知时使用动态分配 当一个二维数组每一维的大小在编译时都是已知时,可以采用类似于创建一维数组的语法 来创建二维数组.例如,一个类型为char的7×5数组可用 ...

  10. struts2 <s:iterator> 遍历方法

    1.MapAction.java import java.util.ArrayList;   import java.util.HashMap;   import java.util.List;    ...