CSS3 圆角效果

css教程 跟版网
现在使用CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari 也通过私有属性实现了该功能：
现在使用CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari 也通过私有属性实现了该功能：

<div style=" background-color: #ccc; -moz-border-radius: 5px;  -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox 和 Safari 实现圆角</div>

    效果如下：

    其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius 是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性，如果你只要指定某一个角是圆角的话，它们都分别定义了四个属性：

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

    当然 IE （包括 IE8）还是不支持，所以该效果只能在 Firefox, Safari, 以及 Chrome 中查看。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

CSS3 属性选择器
本文章主要和码农一起来学习CSS3选择器——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。
CSS3动画之3D旋转书本效果
本文向码农介绍CSS3动画之3D旋转书本效果，需要的码农可以参考一下。
CSS3绘制三角形实例介绍
本文章主要向码农介绍用CSS3如何绘制三角形，方法很简单，主要使用到css中的border属性,需要的码农可以参考下。
css3 气泡对话框实例
上一遍文章我们介绍了边三角提示框，那个时候的提示框是比较规则的三角形，本实例将难度进一步升级，用css3制作不规则的气泡对话框。希望对学习css3的朋友有所帮助。
html5和css3的常用参考网
当我们使用HTML5， CSS3，甚至Bootstrap设计网站的时候，有些方面是必须考虑的，比如字体大小，标题大小，行间距，每行字数，字体，颜色，背景图片和文字的搭 配，图标，留白和布局......所有的这些，都不是随随便便的，讲究一定的原则。而这些原则通常我们为
css3 border-radius圆角盒子
css圆角的制作方法很多，在css3没出来之前，我们一般使用图片配合css来完成，但css3发布后，可以直接用css3的border-radius来设置圆角，非常简单。
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室