CSS3 box-orient 属性

实例

指定div元素的子元素横向排列：

div

{

width:350px;

height:100px;

border:1px solid black;

/* Firefox */

display:-moz-box;

-moz-box-orient:horizontal;

/* Safari, Opera, and Chrome */

display:-webkit-box;

-webkit-box-orient:horizontal;

/* W3C */

display:box;

box-orient:horizontal;

}

浏览器支持

想读更多 ->

CSS3 background-clip 属性

实例

指定绘图区的背景：

div

{

background-color:yellow;

background-clip:content-box;

}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

标签定义及使用说明

background

想读更多 ->

html5开发工具有哪些？该如何学习

互联网的发展总是伴随着新技术的产生，吸引着一大批的人为之学习。目前，html5这门技术也是备受大家关注，想要学习html5这门技术的人也是越来越多，主要原因还是在于移动端特别的流行，作为新人想要学习html5或者是哪些代码基础特别薄弱的该如何学习html5这门技术呢？

任何的学习都不是单一的，学习html5这门技术需要配合CSS3、JavaScript。前端的热门催生出大量的前端热门资料，前端的基础无外乎HTML、CSS、js三类，HTML控制内容、CSS控制表现、js控制动效。

在学习的开始阶段，可以先过一遍HTML，能够知道在什么情况下用什么标签就行，不要死记硬背任何东西，在今后接触的多了，自认而然也就熟悉了。接下来就是CSS，重点关注选择器语法、选择器优先级计算，要写出高效简洁的CSS，其实也就是看选择器写得好不好而已。

前端的学习主要靠的就是练习，学习是没有捷径的，有的只是方法，在学习html5开发的过程中尽量少走弯路，每个人都有自己独特的学习方法，熟能生巧，学ht

想读更多 ->

CSS3 font-stretch 属性

实例

让所有的div元素的文本更宽：

div

{

font-stretch: expanded;

}

浏览器支持

想读更多 ->

css3—转换transform

使用转换可以对元素进行移动、缩放、旋转、拉伸等，说到底也就是让某个元素改变形状、大小和位置。

transform主要包括：移动translate、旋转rotate、扭曲（倾斜）skew、缩放scale以及矩阵变形matrix等。

语法：

transform: none | translate( ) ? rotate( ) ? skew( ) ? scale( ) ? matrix( )

none表示不变换，后面变换函数可以连同使用，空格隔开。

1、移动translate（ｘ，ｙ）

包括translateＸ、translateＹ，表示向ｘ、ｙ轴移动。

２、旋转rotate（度数）

通过一个度数来对元素进行旋转，正数是顺时针，负数是逆时针。

一、transform

语法：none|<transform-function>[<transform-function>]* 初始值是none。

transform-function函数取值：

matrix():定义矩阵变换。

translate():移动元素对象。

scale():缩放元素对象。

rotate():旋转元素对象。

skew():倾斜元素对象。

例如(兼容浏览器)：

1.rotate()函数：transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

2.s

想读更多 ->

CSS3 transition-delay 属性

实例

等待2秒前切换效果开始：

transition-delay: 2s;

-webkit-transition-delay: 2s; /* Safari */

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性定义及使用说明

transition-del

想读更多 ->

CSS3中的border-image属性

border-image是CSS3的一个属性，今天就来分析下该属性的一些特征，方便大家以后在使用上遇到难题！

border-image是将简单的工作复杂化，当学习完该属性以后，发现该属性的运用能够大大节省编码时间和效率，总结一下，大致适用于以下两个场景：

元素边框不规则的情况。这时候，就需要用设计图作为边框背景，border-image与background-image相比，好处是更具灵活性，可以用代码控制边框背景的拉伸和重复，因而能够创造出更多样的效果

按钮宽高不确定的情况。用border-image来制作按钮，可以用同一张背景图，制造出各种宽高的按钮。

border-image属性分析

边框背景图片。格式为：url(“…”)。

border-image-slice

图片边框向内偏移的距离。格式：border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。 如下图所示：

想读更多 ->

CSS3 border-image-outset 属性

实例

设置border-img-outset属性：

div

{

border-image-source: url(border.png);

border-image-outset: 30 30;

}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性定义及使用说明

border-image-outset用于指定在边框外部绘制 border-image-area 的量

想读更多 ->

CSS3 实现立方体旋转动画

感谢 头条好友 @一锅杂货铺 在我上期文章的评论，并要求实现一个CSS3实现立方体动画效果。效果一般还请见谅，我会简单写下如何实现的，一起学习学习。

本期我简单实现了一个效果，可以访问我的网站http://www.jinyingfei.com/web/login/index查看效果哦

效果图如下： 简陋了点请见谅

可以进行点击按钮实现左右旋转、上下旋转。更多效果，再说喽。

下面看如何实现的：

CSS代码如下：

*{/** 项目中不能使用*的 */

margin:0;

padding:0;

}

html,body{

width: 100%;

想读更多 ->