手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS3实现DIV圆角效果完整代码
CSS3实现DIV圆角效果完整代码
摘要:CSS3实现DIV圆角-CSS3教程-计划-博客园#yuanjiao{font-family:Arial;border:2pxsolid#3...

<!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.jb51.net"/>

<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圆角效果完整代码1

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

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

查字典教程网CSS3教程

【CSS3实现DIV圆角效果完整代码】相关文章:

css3实现input输入框颜色渐变发光效果代码

CSS实现圆柱型数据报表的方法

利用CSS3实现圆角的outline效果的教程

CSS滤镜实现的颜色渐变翻转效果

CSS分页数字放大效果

CSS各种文字对齐方式代码

CSS3制作ajax loader icon实现思路及代码

css3实现闪亮进度条效果

CSS3制作loading加载动画效果代码

CSS3动态效果学习笔记

精品推荐
分类导航