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实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 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
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
jquery按回车提交数据的代码示例
2013/11/05 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
python实现简单井字棋小游戏
2020/03/05 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
python实现简单猜单词游戏
2020/12/24 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
自我评价的正确写法
2013/09/19 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
监察建议书格式
2014/05/19 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书