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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 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
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
Python性能提升之延迟初始化
2016/12/04 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python 项目目录结构设置
2020/02/14 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
python归并排序算法过程实例讲解
2020/11/04 Python
应聘美工求职信
2013/11/07 职场文书
办理暂住证介绍信
2014/01/11 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
党员评议个人总结
2014/10/20 职场文书
七年级作文之下雨天
2019/12/23 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
vue elementUI表格控制对应列
2022/04/13 Vue.js
python小型的音频操作库mp3Play
2022/04/24 Python