第一种方法：如果是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. 【特殊的图+DP】【11月校赛】大家一起玩游戏

    大家一起玩游戏 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submi ...

  2. HTML5新增的主体元素和新增的非主体结构元素

    HTML5新增的主体元素 article元素 article元素表示文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的 ...

  3. Android使用NumberPicker控件实现选择城市，生日

    本人菜鸟一枚,第一次写技术博客,有点小紧张,加上代码很乱,求不喷. 先放效果图: 界面就这么简单. 然后放上代码: package com.example.dialog; import java.ut ...

  4. JQ 事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 介绍一款管理软件Redmine

    Redmine是用Ruby开发的基于web的项目管理软件,是用ROR框架开发的一套跨平台项目管理系统,据说是源于Basecamp的ror版而来,支持多种数据库,有不少自己独特的功能,例如提供wiki. ...

  6. F - The Circumference of the Circle

    Description To calculate the circumference of a circle seems to be an easy task - provided you know ...

  7. JDBC之一：JDBC快速入门

    (1)下载Oracle的JDBC驱动,一般放在$ORACLE_HOME/jdbc/lib目录,关于驱动的版本请见: http://elf8848.iteye.com/blog/811037 随Orac ...

  8. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  9. Oracle EBS-SQL (OM-3):销售连接停靠站时冲减库存出错处理.sql

    DELETE FROM INV.MTL_RESERVATIONS MRWHERE EXISTS (SELECT 1 FROM WSH.WSH_DELIVERY_ASSIGNMENTS WDA      ...

  10. LINUX USB MASS STORAGE DRIVER流程图