CSS3教程

border-radius-all

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

页面中圆角的实现是个很头疼的问题,虽然现在有很多种实现方法,但是都是比较麻烦的。在本文中,让我们看看如何使用CSS3 border-radius来实现圆角DIV。 页面中圆角的实现是个很头疼的问题,虽然现在有很多种实现方法,但是都是比较麻烦的。在本文中,让我们看看如何使用CSS3 border-radius来实现圆角DIV。 跨浏览器兼容性 就像在上一篇《CSS3教程:什么是CSS3》中提到的,并... »

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

现在我们来看一看如何为边框的border-color添加更多的色彩。 现在我们来看一看如何为边框的border-color添加更多的色彩。 上一篇介绍了:CSS3教程(2):网页边框半径和网页圆角 使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,... »

box-shadow

CSS3教程(4):网页边框和网页文字阴影

阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样. 阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 上一篇介绍了:CSS3教程(3):border-color网页边框色彩 一般可以分为box-sh... »

CSS3教程(5):网页背景图片

背景图片/纹理有很多种使用方式,常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来实现更完美的效果。 背景图片/纹理有很多种使用方式,常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来实现更完美的效果。 上一篇文章:CSS3教程(4):网页边框和网页文字阴影 CSS3的背景图片大小可以写成 backgrou... »

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

想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧! 想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧! 上一篇:CSS3教程(6):创建网站多列 要使用一款字体,我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。 尽管这样,让我们简单的学习一下字体方面的... »

CSS3教程(6):创建网站多列

使用CSS3可以为你的网站创建多列,而不用为每列制定特定的层或段落。 使用CSS3可以为你的网站创建多列,而不用为每列制定特定的层或段落。 上一篇文章:CSS3教程(5):网页背景图片 与多背景图片一样,CSS3多列也是我最喜爱的一个技术。我想这条CSS3属性有在报纸和杂志布局中以外的很多潜在的用途。如果你在某个想法或个人网站中使用了这种方法,请在下面的评论中提交你的链接,我很高兴能确认这种方法能... »

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

CSS3透明…不透明…渐变…随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。 CSS3透明…不透明…渐变…随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了,而IE一直不支持! 上一篇文章:CSS3教程(7):CSS3嵌入字体 “opacity”声明用来设置一... »

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

使用CSS3 HSL声明同样是用来设置颜色的。是的,这个和RGBA的效果是一样的。上一篇文章:CSS3教程:设置RGB颜色HSL声明使用色调Hue、饱和度Saturation和亮度Lightness来设置颜色。Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。Saturation值是一个百分比:0%是灰度,100%饱和度最高Lightness值也是一个百分比:0%是最暗,50%... »

CSS3教程(9):设置RGB颜色

使用新的CSS3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。上一篇文章:CSS3教程:CSS3透明度指南RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。浏览器兼容性RGBA现在在Firefox、Google Chrome和Safari中都... »

CSS3教程:background-clip和background-origin

原文:http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip 和 background-origin 是 CSS3 中新加的 background module 属性,用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而... »

CSS3教程:新增加的结构伪类

CSS 3增加了大量的结构伪类,利用文档结构树来实现表现,从而可以减少页面内class属性和ID属性的定义,使得文档更加简洁。 相关阅读文章:CSS3属性选择符介绍 4.7.3 结构伪类(Structural pseudo-classes) CSS 3增加了大量的结构伪类,利用文档结构树来实现表现,从而可以减少页面内class属性和ID属性的定义,使得文档更加简洁。 以下示例,请使用Win XP的... »

CSS3教程:边框属性border的极致应用

宽高为0,就会只显示边框部分,然后用overflow来将多余部分截取掉,剩下的就是斜角内容了。 »

CSS3教程(1):什么是CSS3

CSS3不是新事物,更不是只是围绕border-radius属性实现的圆角。也就是说,如果你要在你的网站中使用CSS3,请确认有针对不支持CSS3的浏览器的兼容方法。CSS3只是表示下一代CSS,3只是版本号。如果CSS3还没有完全被支持,那么我为什么要写CSS3呢?所有本系列教程所讨论的内容,在该测试页面都有演示,你也可以访问该页面,来测试一下自己的浏览器是否支持CSS3。 »

lamp

CSS3 字体

CSS3 字体 CSS3 @font-face 规则 使用以前 CSS 的版本,网页设计师不得不使用用户计算机上已经安装的字体。 使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。 您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。 您”自己的”的字体... »

CSS3 2D 转换

CSS3 2D 转换

CSS3 2D 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-right:50px; border-radius:5px; border:1px s... »

Rotate Y

CSS3 3D 转换

#rotate2D,#rotate3D { width: 80px; height: 70px; color: white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-right:50px; border-radius:5px; border:1px solid #00... »

CSS3 过渡

.animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf... »

CSS3 动画

#animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:animated_div ... »

CSS3 多列

以下实例将 元素中的文本分为 3 列:实例divCSS3 多列中列与列间的间隙column-gap 属性指定了列与列间的间隙。实例div CSS3 多列属性下表列出了所有 CSS3 的多列属性: 属性 描述 column-count »

CSS3 用户界面

CSS3 用户界面 CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 CSS3 ... »

Norway

CSS 图片

CSS 图片 本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img { border-radius: 8px; } 实例 椭圆形图片: img { border-radius: 50%; } 缩略图 我们使用 border 属性来创建缩略图。 实例 img { border: 1px solid #ddd; border-radius: 4px; padding: ... »

CSS 按钮

.w3-ripple{ position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari ... »

CSS 下拉菜单

.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown:hover .dropbtn {... »

CSS 分页实例

CSS 分页实例 .article-body ul li { background-image:none} .pagination,.pagination2,.pagination3 { display: inline-block; padding: 0; margin: 8px 0; } .pagination li,.pagination2 li,.pagination3 li {displa... »

CSS3 教程

CSS3 教程 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 本教程向您讲解 CSS3 中的新特性。   点击 “尝试一下” 按钮查看在线实例。 CSS3 参考手册 在软件开发网中,我们提供完整的 CSS3 参考手册,包括所有属性和选择器的语法、实例、浏览器支持信息。 CSS 属性参考手册 CSS3 浏览器支持情况 CSS 选择器参考手册... »

Page 1 of 212