CSS3实现DIV圆角效果完整代码


Posted in HTML / CSS onOctober 10, 2012
复制代码
代码如下:

<!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="3water.com"/>
<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不支持。

三水点靠木CSS3教程

</div>
</body>
</html>

效果图(Chrome):
CSS3实现DIV圆角效果完整代码


实际效果(请使用支持CSS3的浏览器):

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

三水点靠木CSS3教程

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 #HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 #HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 #HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 #HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 #HTML / CSS
CSS3中Color的一些特性介绍
May 27 #HTML / CSS
CSS3 简写animation
May 10 #HTML / CSS
You might like
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
iView框架问题整理小结
2018/10/16 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
python文件操作整理汇总
2014/10/21 Python
Python实现完整的事务操作示例
2017/06/20 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
python hash每次调用结果不同的原因
2019/11/21 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
科研课题实施方案
2014/03/18 职场文书
师德师风个人反思
2014/04/28 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
十佳少年事迹材料
2014/12/25 职场文书