CSS3的border-radius(圆角)

CSS3的border-radius(圆角)的相关文章

• 
  CSS3样式：box-shadow,border-radius和transition

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

  直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。 Darcy Clarke 和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的 圆角图片 。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、borde...[ 查看全文 ]

  松花江_黑水

  201
• 
  CSS3教程(3):border-color网页边框色彩

  标签：Web开发

  现在我们来看一看如何为边框的border-color添加更多的色彩。 上一篇介绍了：CSS3教程(2):网页边框半径和网页圆角 使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将被添加到剩下的宽度。 浏览器兼容性 目前只有Firefox支持CSS3 border-colo...[ 查看全文 ]

  狙击号

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

  标签：Web开发

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

  赵佩暄

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

  标签：Web开发

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

  王春源4614

  01
• 
  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圆角

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

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

  单色器windy

  01
• 
  IE兼容css3圆角的htc解决方法

  标签：Web开发

  IE兼容css教程3圆角的htc解决方法 现在css3的border-radius属性可以很方便的实现圆角功能，对网站前台人员无疑是一件喜事，但悲剧的是IE6/7/8并不支持，让我们弃新技术不用，是不可能的，因此找到了一种解决的办法--- IE利用VML矢量可标记语言作为画笔绘出圆角： 下载一个压缩包ie-css3.htc，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的 HTML文件，.htc 文件是IE内核...[ 查看全文 ]

  怪你过分执着丶

  401
• 
  CSS3教程(10):CSS3 HSL声明设置颜色

  标签：Web开发

  使用CSS3 HSL声明同样是用来设置颜色的。下一个呢？ HSLA？ 是的，这个和RGBA的效果是一样的。 上一篇文章：CSS3教程(9):设置RGB颜色 HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。 Hue 衍生于色盘：0和360是红色，接近120的是绿色，240是蓝色。 Saturation 值是一个百分比：0%是灰度，100%饱和度最高 Lightness 值也是一个百分比：0%是最暗，50%均值，100%最亮。 ...[ 查看全文 ]

  张杰马玉涛

  41
• 
  CSS3教程(8):CSS3透明度指南

  标签：Web开发

  CSS3透明不透明渐变随便你怎么叫它吧！这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了，而IE一直不支持！ 上一篇文章：CSS3教程(7):CSS3嵌入字体 opacity声明用来设置一个元素的透明度：层、文字、图片等一个opacity的值为1的元素是完全不透明的，反之，值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。 浏览器兼容性 opacity是浏览器支持...[ 查看全文 ]

  天蝎赵忠航

  31
• 
  CSS3中支持IE9, Firefox, Safari, Chrome的圆角

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

  W-教程博主就比较喜欢圆角的盒子模型，现在CSS3已经可以轻松实现跨浏览器的圆角效果，包括Firefox高版本，IE9，Safari，Chrome等高端浏览器。 我们这样去定义一个盒子模型： -moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius:10px; 在Firefox，和Chrome中的效果： 其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius是 webkit 内核浏览器（如 Saf...[ 查看全文 ]

  瑞丽芳香

  11
• 
  初步了解CSS3

  标签：Html CSS布局 Div+CSS XHTML

    最近闲来无事，上W3C转了一圈，粗略地浏览了一下尚未发布的CSS3，虽然还未被W3C正式发布出来，但还是能从已有的资料中窥出一些端倪，一个很明显的特征，CSS3制订得越来越细致了，某些细节之处完全超乎你所能想象的到的范围。 在这里不提及CSS3的语法，因为对于目前尚未有软件支持的CSS3，任何语法的探讨都像是空中楼阁，毫无意义可言。以下我就列举一下CSS3中部分新内容。 1、...[ 查看全文 ]

  3鈨o笍濮

  41
• 
  CSS3 有关的问题

  标签：Web开发

  Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解，他是这个领域杰出的专家，曾写过不少 CSS 方面的书，是 An Event Apart 的合伙创始人，A List Apart 团队成员，还是 Complex Spiral Consulting 的创始人。另外， Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家，他们负责维护和开发 CSS。   不用说，如果要找个人请教一些 CSS 方面的问题，Eric Meyer 就是那个人。本文作者...[ 查看全文 ]

  你印哥

  21
• 
  根据W3C的CSS3草案翻译的CSS3参考手册

  标签：Web开发

    国内网友，利用业余时间整理出了一份比较完整的CSS 3.0 参考手册，非常不容易。手册是根据W3C的CSS3草案翻译，并且结合实际的示范结合而成。每一页都倾注了每一个同学的心血。 预览页面： 原始发布处下载地址： http:/ /webteam.tencent.com/css3/[ 查看全文 ]

  zZ__沉默

  91
• 
  CSS教程：详解CSS3 Media Queries

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

  说起CSS3的新特性，就不得不提到 Media Queries 。本文比较详细，所以很多实际中用不到。所以如果只是想简单了解Media Queries，推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过时的电视机等等。 而 Media Queries 的引入，其作用就是允许添加表达式用以确定媒...[ 查看全文 ]

  运城学院好男人

  21
• 
  css教程：CSS3 Media Queries 详解

  标签：Web开发

  说起CSS3的新特性，就不得不提到 Media Queries 。 本文比较详细，所以很多实际中用不到。所以如果只是想简单了解Media Queries，推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过时的电视机等等。 而 Media Queries 的引入，其作用就是允...[ 查看全文 ]

  找Q757856333滴

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

  标签：Web开发

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

  走走道停

  01
• 
  CSS3系列教程:阴影

  标签：Web开发

  阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 #XXX = 像通常一样的颜色 了解了这些，我们就可以以下面的方法开始体验了 浏览器兼容性： 在前面的介...[ 查看全文 ]

  cghjvhome

  21
• 
  CSS教程:与众不同的CSS3技巧

  标签：Web开发

  你们中有许多人可能已经听到过有关CSS3的不少传言，但是我们现在能真正用到的CSS3技巧又有哪些呢？本文，我将向你展示一些 与众不同的CSS3技巧 ，这些技巧在一些主要的浏览器中表现良好（如Firefox，Chrome，Safari，Opera浏览器）。这些效果会在不支持的浏览器中降级渲染（如IE浏览器）。使用浏览器特定的声明，许多提议的CSS3样式都可以马上拿来使用。 如果你不知道浏览器的特定声明是什么，你只需...[ 查看全文 ]

  幸福安与聪

  31