使用CSS3新技术完美实现圆角效果

2016-02-20 00:01 2 1 收藏

下面是个使用CSS3新技术完美实现圆角效果教程，撑握了其技术要点，学起来就简单多了。赶紧跟着图老师小编一起来看看吧！

【 tulaoshi.com - Web开发】

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

效果如下：

其中 -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 中查看。

来源:http://www.tulaoshi.com/n/20160220/1631065.html

上一篇：如何修复Win7系统：Win7蓝屏怎么办
下一篇： Windows7系统开机设置自动连网

看过《使用CSS3新技术完美实现圆角效果》的人还看了以下文章更多>>

CSS3的优势以及网页设计师如何使用CSS3技术

标签： Web开发

前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章，它详细介绍了CSS3的新特性和它的使用方法，它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音，并详细说明了每个新技术目前有哪些浏览器...

使用CSS制作圆角效果

标签： Web开发

Web2.0中，圆角效果是很常见的，以前都是用图片来模仿，现在直接用css就能实现，例子代码如下 Html代码： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html head titleUntitled Document/title meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /head style type="text/css" body{...

CSS3系列教程:边框半径和圆角

标签： Web开发

页面中圆角的实现是个很头疼的问题，虽然现在有很多种实现方法，但是都是比较麻烦的。在本文中，让我们看看如何使用CSS3 border-radius来实现圆角DIV。跨浏览器兼容性就像在上一篇《CSS3系列教程：简介》中提到的，并不是所有的浏览器支持CSS3，但是那些比较好的浏览器选择兼容，而不是直接支持。我们有两个能使用的前缀。前缀...

学会在适当的地方使用CSS新技术

标签： Web开发

浏览器对于CSS的支持问题落后于CSS的发展，以占有市场绝对份额的Internet Explorer来说，直到其前不久发布的第8个版本才刚刚完成对CSS 2.1的完整支持，而CSS的最新进展是CSS 3规范的制定已经行了一大半。但是这并不妨碍我们使用CSS中的新技术。虽然我们不能像使用CSS中的通用技术那样随心所欲地应用他们，但是却可以在特定...

32个使用CSS3技术的网页设计欣赏

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

我想很多同学也慢慢接触到CSS3这们技术，比如简单的圆角、下阴影使用，然而这些是不够的，我们需要学习一些使用CSS来实现的交互，让网页更有动感，这也是未来的设计趋势，手机网站、APP也是如此，把交互设计重视起来。今天我们摘选32个使用CSS3技术的网页设计，从这些作品中我们可以学习别人是如何运用CSS3并配合自己的iDea来实现很多漂亮的...

查看更多精彩>>