CSS3圆角（border-radius）
CSS3中的border-radius支持IE9+,chrome,firefox 2、3+,以及safari3.2+浏览器。
border-radius可直接使用，无需加前缀(注意：firefox13取消了-moz前缀，即由原来的-moz-border-radius变为border-radius，加上前缀会造成无法显示圆角，chrome加前缀和不加前缀都可以)border-radius后面直接加值即可，该值来确定圆角的大小，如：border-radius:5px;
1、有边框：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#div1{
padding: 10px;
width:300px;
height:100px;
border:3px solid #cc0000;
border-radius:10px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
效果：
2、无边框
在css中添加颜色代码即可
background: #cc0000;
效果
无边框完整代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#div2{
padding: 10px;
width:300px;
height:100px;
border:3px solid #cc0000;
border-radius:10px;
background: #cc0000;
}
</style>
</head>
<body>
<div id="div2"></div>
</body>
</html>
3、四角不同大小
四角不同大小特别简单，使用border-radius:5px 10px 15px 20px;整合即可。
如下效果：
完整代码是：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#div3{
padding: 10px;
width:300px;
height:100px;
border:3px solid #cc0000;
border-radius:5px 10px 15px 20px;
background: #cc0000;
}
</style>
</head>
<body>
<div id="div3"></div>
</body>
</html>
CSS3圆角（border-radius）的更多相关文章
- 兼容所有浏览器的CSS3圆角
兼容所有浏览器的CSS3圆角 解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待. ...
- 纯css3圆角下拉菜单 都没敢用js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3圆角
使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...
- [HTML] CSS3 圆角
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". CSS3 border-radius 属性 使用 CSS3 border-radius 属性,你 ...
- 转-CSS3 圆角（border-radius）
CSS3 圆角(border-radius) 前缀 例1 例2:无边框 书写顺序 其它 支持性 值:半径的长度 前缀 -moz(例如 -moz-border-radius)用于Firefox -w ...
- border-radius 样式表CSS3圆角属性
border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...
- CSS3圆角气泡框，评论对话框
<title>CSS3圆角气泡框,评论对话框</title> <style> body { ; ; font:1em/1.4 Cambria, Georgia, s ...
- CSS3圆角详解
一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- IE支持CSS3圆角
在CSS中使用CSS插件文件即可让IE6/IE7/IE8浏览器. 具体CSS代码: .yuan { border: 2px solid #C0C0C0; -moz-border-radius: 10p ...
随机推荐
- Velocity 的工作原理
原文出处:http://www.blogjava.net/jackybu/articles/8803.html 这个程序很简单,但是它能让你清楚的了解Velocity的基本工作原理.程序中其他部分基本 ...
- linux下利用openssl来实现证书的颁发（详细步骤）
1.首先需要安装openssl,一个开源的实现加解密和证书的专业系统.在centos下可以利用yum安装. 2.openssl的配置文件是openssl.cnf,我们一般就是用默认配置就可以.如果证书 ...
- (9/18)重学Standford_iOS7开发_动画、自动布局_课程笔记
最近开始实习,没多少时间更新了=_= 第九课: 1.上节课demo:Dropit完整实现 https://github.com/NSLogMeng/Stanford_iOS7_Study/commit ...
- 使用C++的开源序列化(Serialization)库cereal
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用C++的开源序列化(Serialization)库cereal.
- 阿里云部署Docker(7)----将容器连接起来
路遥知马力.日久见人心.恩. 该坚持的还是要坚持. 今天看到一个迅雷的师弟去了阿里,祝福他,哎,尽管老是被人家捧着叫大牛.我说不定通过不了人家的面试呢.哎,心有惭愧. 本文为本人原创,转载请表明来源: ...
- RichtextBox打印
附件http://files.cnblogs.com/xe2011/CSHARP_RichtextBox_PRINT.rar 打印 详情 http://support.microsoft.com/kb ...
- Linux Kernel 排程機制介紹
http://loda.hala01.com/2011/12/linux-kernel-%E6%8E%92%E7%A8%8B%E6%A9%9F%E5%88%B6%E4%BB%8B%E7%B4%B9/ ...
- linux shell wc 命令
1. 语法与选项 Short Option Long Option Option Description -c –bytes print the byte counts -m –chars print ...
- java的一些程序
1.文件读取并打印 import java.io.*;public class readandprint{//*********Found********public static void main ...
- 关于weight属性使用的一些细节
之前被这个属性困扰过好久,今天一个偶然的机会,终于把这个搞清楚了,现在与大家分享一下. 假设我们要在一个LinearLayout布局中显示两个按钮,button1和button2,button2的宽度 ...