用CSS做圆角矩形

　　第一种方法：如果是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做圆角矩形的更多相关文章

如何在html中做圆角矩形和只有右边的"分隔线"
这个网站满好的,可以常看看 css-matic中有几个很好的写css可视化的工具其实做css 版式布局等都可以有工具的推荐40个优秀的免费CSS工具 debugger正则表达式在线其实是对(理论 ...
CSS样式做圆角
我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做: 是什么方式导致这项技术表现得这么了不起呢(What makes this ...
css圆角矩形及去掉空格属性
css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...
不用css样式表和背景图片实现圆角矩形，超简洁！
当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像 ...
css+div制作圆角矩形的四种方法
圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...
CSS中设置元素的圆角矩形
圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
[BOT] 一种android中实现“圆角矩形”的方法
内容简介文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
解读Unity中的CG编写Shader系列四（unity中的圆角矩形shader）
转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...

随机推荐

9年经验,总结SEO职业瓶颈
昨天与某集团的副总与部门总监沟通了一些关于SEO发展与瓶颈的问题,有很多感触,今天整理出来分享给大家.其实关于SEO瓶颈这个话题已经不是一年两年了,很多新人老人越来越困惑,9年历程一路风雨走来,希望能 ...
oracle 数据库学习
1.更改数据库用户名密码: alter user '用户名' identified by ’password'. 2.查看数据库有哪些用户:sqlplus system/password ;selec ...
Android通过PHP连接MySQL(用到Json)
1下载phpnow 如果已经有mysql 则需要换一个端口在服务器机器上的phpnow安装目录E:\PHPnow-1.5.5\htdocs下新建一个test.php文件: 其中我用的数据库是test ...
SQL中Truncate的用法（转）
转自:http://www.studyofnet.com/news/555.html 本文导读:删除表中的数据的方法有delete,truncate, 其中TRUNCATE TABLE用于删除表中的所 ...
SQL使用记录
Q:怎么删掉sql server登录时的用户名?(仅仅是删掉那个登录时的提示) A:先关闭数据库登录引擎,然后删除:%AppData%\Microsoft\Microsoft SQL Server\1 ...
USACO Chapter 1 解题总结
USACO Chapter 1 解题总结 1.1.1 Your Ride Is Here 基本字符串操作,无压力. 1.1.2 Greedy Gift Givers 基础模拟题,弄明白题意,不怕麻烦, ...
Submission Details
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...
理解Java的GC日志
分析如下GC日志:[GC [PSYoungGen: 9216K->1024K(9216K)] 1246196K->1246220K(1287040K), 0.2398360 secs] [ ...
newifi升级固件及开启SSH
1.固件去官方社区下载 2.开启SSH 连接newifi访问http://192.168.99.1/newifi/ifiwen_hss.html 看到返回success 说明开启SSH 3.使用 ...
ASCII码排序,hdu-2000
Problem Description 输入三个字符后,按各字符的ASCII码从小到大的顺序输出这三个字符. Input 输入数据有多组,每组占一行,有三个字符组成,之间无空格. Output ...

用CSS做圆角矩形

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

随机推荐

热门专题