CSS3实现DIV圆角完整代码

本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9以上。IE6、7、8不支持。

在线预览效果：http://hovertree.com/texiao/css/4.htm

画圆型的例子：http://hovertree.com/h/bjae/css3circle.htm

实际应用：http://hovertree.com/texiao/jquerytree/3/

测试:http://hovertree.com/texiao/css/4b.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>CSS3实现DIV圆角 - CSS3教程 - 计划 - 博客园</title><meta name="keywords" content="www.cnblogs.com/jihua"/><style type="text/css"> #yuanjiao{font-family: Arial;border: 2px solid #379082;border-radius: 20px;padding: 30px 30px;width: 330px;}</style>
</head>
<body>
<div id="yuanjiao">
本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9。IE6、7、8不支持。<br /><br />
博客园计划CSS3教程<br />jihua.cnblogs.com
</div>
</body>
</html>

效果图(Chrome)：

实际效果（请使用支持CSS3的浏览器）：

本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9。IE6、7、8不支持。

博客园计划CSS3教程
jihua.cnblogs.com

CSS3实现DIV圆角完整代码相关推荐

html中对局部图片进行圆角处理,CSS3实现DIV圆角效果完整代码
复制代码代码如下: CSS3实现DIV圆角 - CSS3教程 - 计划 - 博客园 font-family: Arial; border: 2px solid #379082; border-radi ...
css3实现动画效果完整代码demo
过渡渐隐适合两张图片调整其中一个透明度,完整代码: <!doctype html> <html lang="en"> <head><me ...
java代码实现打气球游戏_javascript+css3开发打气球小游戏完整代码
效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: {margin:0;padd ...
html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
java代码实现打气球游戏_关于javascript和css3开发打气球小游戏的完整代码
这篇文章主要介绍了关于javascript和css3开发打气球小游戏的完整代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码, ...
css3设置div边角是圆角
使用css3设置div边角是圆角代码如下 -moz-border-radius:7px; -webkit-border-radius: 7px
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效（附完整代码）...
摘要腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
html5闪光字效果,如何使用css3+html5来制作文字霓虹灯效果（付完整代码）
在科技日益发展的今天,人们对于审美越来越挑剔,这就要求我们对于前端开发的态度更加的严谨的同时,需要加入新鲜的元素,以达到吸引目光的目的.那么今天本文带大家了解一下如何使用css3+html5来制作文字 ...
html页面小宠物代码大全,纯css3实现宠物小鸡实例代码
最近看了很多关于css3的知识和文章,觉得css3用起来很方便,使用css3的话,在页面布局上可以省去很多不必要的代码.所以最近用css3仿写了我每天都照顾的宠物小鸡的模样,第一次写,有些细节处理的不 ...

CSS3实现DIV圆角完整代码

CSS3实现DIV圆角完整代码相关推荐

最新文章

热门文章