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

使用CSS3新技术 完美实现圆角效果的相关文章

• 
  使用CSS 3新技术 完美实现圆角效果

  标签：Web开发

  今天学习使用 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 和...[ 查看全文 ]

  咨询32365

  01
• 
  网页美工应该了解的CSS3新技术

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

  1：基本标记 在我们开始这个教程之前，先来创建整个教程都要使用的基本标记。 我们的xHTML需要一下div元素: #round, 使用CSS3代码实现圆角. #indie, 应用个别的几个圆角. #opacity, 展示新的CSS3实现不透明度的方式. #shadow,展示不使用Photoshop的情况下，使用CSS3来实现阴影效果. #resize, 展示如何使用某种CSS来实现重设大小的效果. 综上所述，我们的xHTML应该是这样的:    !DOCTYP...[ 查看全文 ]

  政通人和天地人

  21
• 
  CSS3中的5个有趣的新技术

  标签：Web开发

  CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。网页教学网将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。 相关文章：介绍CSS3使用技巧5个 1：基本标记 在我们开始这个教程之前，先来创建整个教程都要使用的基...[ 查看全文 ]

  风中少年heart

  41
• 
  CSS3中如何实现渐变效果

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

  渐变可以创建类似于彩虹的效果，低版本的浏览器不的不使开发者用图片来实现，CSS3将会轻松实现网页渐变效果。 要得上面的线性渐变效果，我们这样去定义CSS3样式： background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */filter: prog...[ 查看全文 ]

  小小妞91

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

  标签：Web开发

  前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章，它详细介绍了CSS3的新特性和它的使用方法，它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音，并详细说明了每个新技术目前有哪些浏览器兼容。网页教学网本想将本文翻译成中文版和大家分享，但发现已有...[ 查看全文 ]

  走走道停

  01
• 
  CSS圆角技术

  标签：Web开发

  要一个宽度不固定的框，事情变得有些复杂了。宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。 为什么说这更难一些呢？因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来，以便框能够在各个方向伸展。于是，四张图片就意味着需要四个HTML对象来作为背景图片的载体。 有一些实现办法包括在样式表中使用“生成内容”，即使用：before和:after伪类来为单独的一...[ 查看全文 ]

  鍖糕櫈

  21
• 
  CSS实现绝对的完美圆角框

  标签：Web开发

  导言： 本文探讨的是圆角框的终极解决方案，其核心关键词是圆滑、完美、兼容、重用性、语义，这些技术都是收集目前网络上最流行的做法。纵观种种方法，各有其优势，请针对不同的环境分别使用。 圆角框，因为其样式比直角框漂亮，所以成为设计师心中偏爱的设计元素。现在的web标准下大量的网页、博客都采用圆角框设计，成为一道亮丽的风景线。 然而，就是这个圆角，却成为了网页前端人员心中永远抹之...[ 查看全文 ]

  儒雅的小噶

  41
• 
  使用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{ padding: 20px; background-color: #FFCC66; font: 100.01% "Tr...[ 查看全文 ]

  再銱吔袙寀忉

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

  标签：Web开发

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

  赵佩暄

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

  标签：Web开发

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

  XS泡沫沫1

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

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

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

  良心找不到寄托

  31
• 
  用js实现的抽象CSS圆角效果!!

  标签：Web开发

  大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: html head titlecss圆角效果/title meta http-equiv="content-type" content="text/html; charset=gb2312" style type="text/css" div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;h...[ 查看全文 ]

  HQ琪娃

  41
• 
  用css3制作纸张效果

  标签：Web开发

  一、中规中矩的效果 所谓中规中矩的效果就是加个投影，贴个胶带什么的。效果如下： 您可以狠狠地点击这里： 中规中矩纸张效果demo 这里纸张本身的效果没有什么说头的，就是个CSS3的 box-shadow投影 效果而已，相关代码如下： -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); 反而是上面的...[ 查看全文 ]

  装修赌石翡翠

  281
• 
  CSS3教程(2):网页边框半径和网页圆角

  标签：Web开发

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

  什么_都木有

  11
• 
  CSS3教程(1):什么是CSS3

  标签：Web开发

  CSS3不是新事物，更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里，已经准备好了首次登场，呷着咖啡，等着浏览器来铺上红地毯。你看，浏览器需要跟上了 注意：浏览器需要改进 尽管把玩CSS3是很有趣的事情就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如果你要在你的网站中使用CSS3，请确认有针对不支持CSS3的浏览器的...[ 查看全文 ]

  溫柔的反目丶

  31
• 
  CSS3教程(7):CSS3嵌入字体

  标签：Web开发

  想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！ 上一篇：CSS3教程(6):创建网站多列 要使用一款字体，我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。 尽管这样，让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了，但却始终在CSS2.1中还没有出现。CSS3尝试经它带到标准中来。 如果你手上没...[ 查看全文 ]

  不安静的失落

  21
• 
  介绍CSS3使用技巧5个

  标签：Web开发

  CSS 3 + HTML 5 是未来的 Web，它们都还没有正式到来，虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧，可以帮你实现未来的Web。目前这些技术不应该用在正式的客户项目，它们更适合你的个人博客站点，Web 设计社区，或者不会有客户向你投诉的场合。 1. 圆角效果 CSS3 新功能中最常用的一项是圆角效果，标准 HTML 方块对象是90度方角的，CSS3 可以帮你实现圆...[ 查看全文 ]

  zyq2626

  21
• 
  33款CSS3实现的绚丽鼠标悬停效果分享

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

  只要你有创意，完全可以使用CSS3来实现漂亮的动效，当然如果配合jQuery，这样会更加强大，实现更多高级绚丽的动画效果。鼠标hover效果是很常用的，虽然很细微的东西，但网站的细节注定的网站的体验，所以也不要忽视这些小细节。 今天设计达人网整理了33个使用jQuery与CSS3实现绚丽的鼠标悬停效果，有些是纯CSS3的，这些效果你完全可以用在你的网页上，让网站获得更好的体验。 Animated Opening Type （...[ 查看全文 ]

  烈焰群狼灬狼头

  401
• 
  CSS3实现的五种很酷很炫的效果欣赏

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

  CSS3 给 Web 开发带来了革命性的影响，以前很多需要 JavaScript 才能实现的复杂效果，现在使用 CSS3 就能简单的实现。如果你想了解 CSS3 可以做些什么的话，可以参考本文列出的 CSS3 能实现的很炫的应用。这些很酷的例子中有渐变、旋转、字体效果以及三维变换等等，尽情欣赏吧。 1. 制作精美的按钮 2. 实现很酷的字体效果 3. 创建时尚的表单 ...[ 查看全文 ]

  csdnsa_qiaf

  141
• 
  兼容所有浏览器的CSS3圆角

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

  前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的 border-radius 属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。 那么要想在IE中实现圆角，你不得不使用一些技巧，比如使用带有背景图片的CSS类(看一下这篇文章)。 而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。Curv...[ 查看全文 ]

  单色器windy

  01