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利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 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网上调查系统
2006/10/09 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
网站上面有这种切换效果
2006/06/26 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
js轮播图代码分享
2016/07/14 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
电子信息毕业生自荐信
2013/11/16 职场文书
数控个人求职信范文
2014/02/03 职场文书
竞聘书模板
2014/03/31 职场文书
学生会主席演讲稿
2014/04/25 职场文书
停水通知
2015/04/16 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书