CSS 3实现DIV圆角效果完整代码

 <!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.3lian.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):

 

时间: 2025-01-21 15:01:36

CSS 3实现DIV圆角效果完整代码的相关文章

分享 用CSS实现无图片圆角效果

css|圆角 css圆角效果,IE6, firefox均显示正常 <html><head><title>css圆角效果--网页教学网</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><style type="text/css">div.RoundedCorner{backgr

用CSS实现无图片圆角效果

css|圆角 <html><head><title>css圆角效果--网页教学网</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><style type="text/css">div.RoundedCorner{background: #9BD1FA}b.rtop, b.rb

jquery div拖动效果示例代码

 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

JS实现的简单鼠标跟随DiV层效果完整实例_javascript技巧

本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动消失,不过还有些Bug,期待与大家完善这个JS特效. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-over-div-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

jquery div拖动效果示例代码_jquery

复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

css 圆角效果代码

提示:您可以先修改部分代码再运行 css 圆角效果代码 圆角效果 本代码由网页特效网提供 提示:您可以先修改部分代码再运行

CSS实现简单圆角效果

目前,我们要在网页中使用圆角效果,总是通过切图然后嵌套很多div,用背景来实现圆角效果.对于前端开发工程师来说,圆角的确是一个让人又爱又恨的东西,一方面顾及设计师追求的美观效果,另一方面又不得不增添很多工作投入.无意中看到别人写的一个用纯粹css来实现的圆角效果,研究了一下发现对于那些需求比较简单的圆角效果还是一种很好的方法.总结了一下,可以实现自适应的纯css圆角效果. 首先,我们看一下一般圆角的结构: 从下图可以明显看出圆角和直边的关系,其实把圆角放大之后可以看到圆角是由像素化的直边组成的:

纯css实现蓝色圆角效果水平导航菜单代码

         本文实例讲述了纯css实现蓝色圆角效果水平导航菜单代码.分享给大家供大家参考.具体如下:          这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

JS+CSS实现的经典圆角下拉菜单效果代码_javascript技巧

本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu