用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"来进行 ...
- Android中实现圆角矩形及半透明效果。
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们为了美观,有时候需要使用圆角矩形,或半透明之类的效果,在网页设计中很容易实现.但在Android开发中 ...
- 解读Unity中的CG编写Shader系列四（unity中的圆角矩形shader）
转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...
随机推荐
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- Jquery Enter事件
//IE或fireFox Event不同,所有要消除浏览器差异问题 <script type="text/javascript"> $('#<%=txtKeyWo ...
- 四个常用.NET的SqlHelper的方法
至于我为什么要写这篇文章,也许很多人觉得网上大把的sqlhelper的封装类,的确,网上是有很多,我也看过网上很多的版本,但是我发现大多数都是代码生成器生成的,比如动软.CodeSmith等生成的,其 ...
- 在C#实现托盘效果（转）
桌面程序的开发中,经常考虑能在状态栏实现托盘快捷操作,托盘程序的实现在API时代,还是相对复杂的,首先在MSDN中可以查看其函数细节, 然后在根据其要求的参数进行复杂的设置. 在.NET时代 ...
- QT-利用C++仿制windown自带的记事本程序V1.0
下班无事, 发现QT还是很好用的, 就仿制windows的记事本做了一个,未彻底DEBUG, 先拿来分享下. windows记事本大概是这样的: 大概分为以下几步: 1. 界面用QT代码写,即可, Q ...
- c语言-函数的定义及传参
模块化编程 定义: 数据类型 函数名(型参):如果没有数据类型,默认的为int 值传递 地址传递 嵌套调用 递归调用:直接或间接调用本身函数,求可能栈破裂,求阶乘 #include <stdio ...
- win7使用右键导致死机、假死、explorer无法响应的解决方法
右键引起explorer无法响应,奔溃,主要是由于COMCTL32.DLL和COMCTL21.OCX文件引起的 描述:comctl32.dll是Windows应用程序公用GUI图形用户界面模块.报告提 ...
- 程序员都会的 35 个 jQuery 小技巧
收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("cont ...
- Thinking in Java——集合(Collection)
一.ArrayList的使用(略) 二.容器的基本概念 (一).Collection是集合类的基本接口 主要方法: public interface Collection<E>{ bool ...
- Centos安装webbench
webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装: 引用 wget htt ...