第一种方法：如果是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. 修改linux共享内存大小

    这是实际linux系统显示的实际数据: beijibing@bjb-desktop:/proc/sys/kernel$ cat shmmax  33554432 beijibing@bjb-deskt ...

  2. Android应用程序组件Content Provider简要介绍和学习计划

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6946067 在Android系统中,Conte ...

  3. MVC 过滤器 ActionFilterAttribute

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  4. toj4119HDFS

    In HDFS( Hadoop Distributed File System), each data may have a lot of copies in case of data lose. T ...

  5. $ cd `dirname $0` 和PWD%/* shell变量的一些特殊用法

    在命令行状态下单纯执行 $ cd `dirname $0` 是毫无意义的.因为他返回当前路径的".". $0:当前Shell程序的文件名dirname $0,获取当前Shell程序 ...

  6. Centos7安装JDK

    以下是gz包方式: 1,将jdk-8u51-linux-x64.tar.gz放到/usr/java目录下 2,用tar -zxvf jdk-8u51-linux-x64.tar.gz 解压到当前目录 ...

  7. Oracle RETURNING INTO 用法示例 .

    The RETURNING INTO clause allows us to return column values for rows affected by DML statements. The ...

  8. 命名空间 - PHP手册笔记

    概述 命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念,比如在操作系统中,目录用来将相关文件分组,对于目录中的文件来说,目录就扮演了命名空间的角色.这个原理应用到程序设计领域就是命名空间 ...

  9. Train Problem I

    问题陈述: 杭州电子科技大学HANGZHOU DIANZI UNIVERSITY Online Judge Problem - 1022 问题解析: 栈(stack)的简单应用 代码详解: #incl ...

  10. 算法分析-插入排序INSERT_SORT与选择排序SELECT_SORT【线性方法】

    var A = [5, 2, 4, 6, 1, 3]; console.log("排序前-:") A.forEach(function (element, index, arr) ...