CSS3 border-image-repeat 属性

实例

设置重复图像的方式：

div {

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

border-image-repeat: repeat;

}

定义和使用

border-image-repeat 属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）。

提示:你可以查看 border-image 属性 (简写属性用于设置所有 border-image-* 属性)。

效果说明：当鼠标移到a标签的时候，从右上角滑出二维码。

实现方法：

HTML 代码如下：

需要说明的一点是，a链接的跳转需要用javascript拦截，就这一句。

2、需要注意的几个点：

二维码是HTML上没有，需要用css的伪类和css背景实现。

隐藏使用css属性：透明度为0和scale为0；

当鼠标移动到a链接上时候出现，需要设置a:hover

3、CSS3代码：

为了让二维码图片，位置固定，需要先设置父元素为相对定

想读更多 ->

css3重复渐变效果

css3重复渐变 repeating gradient即重复让线性渐变（linear-gardient）或者径向渐变（radial-gradient）重复执行。

用法是repeating-linear-gradient(重复线性渐变)和repeating-radial-gradient(重复径向渐变)

1、重复径向渐变

图1

图1实现代码：

background: -webkit-repeating-radial-gradient(#ff0, #ff0 5px, #f00 5px, #f00 10px);

2、重复线性渐变

浏览器支持

想读更多 ->

CSS3选择器（：nth）

首先第一个网站

https://css-tricks.com/examples/nth-child-tester/

这个学习css3的选择器简单明了，想研究的可以看看哈

接下来第二个网站

http://lea.verou.me/demos/nth.html

由于两个网站都是英文的，对于不会英文的可能敬而远之，如果你用的谷歌浏览器（这里只介绍这款浏览器），可以安装百度翻译的扩展插件来翻译，如果你有更好的翻译插件那就忽略上面的，这款插件百度翻译官网有下载，想要的也只可以找我索要

关于CSS3的所有的选择符，可以参考网站： http://www.w3school.com.cn/cssref/css_se

想读更多 ->

CSS3 overflow-x 属性

实例

如果它溢出了元素的内容区-剪辑div元素的左/右边缘内容：

div

{

overflow-x:hidden;

}

浏览器支持

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

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

属性定义及使用说明

overflow-x属性指定如果它溢出了元素的内容区是否剪辑左/右边缘内容。

提示: 使用overflow-y属性来判断顶部和底部边缘是否裁剪。

想读更多 ->

CSS3 column-gap 属性

实例

指定列之间的40个像素的差距：

div

{

column-gap:40px;

-moz-column-gap:40px; /* Firefox */

-webkit-column-gap:40px; /* Safari and Chrome */

}

浏览器支持

属性定义及使用说明

column-gap的属性指定的列之间的差距。

注意： 如果指定了列之间的距

想读更多 ->

css3实现加载动画效果

css3实现加载动画效果,运用到了CSS3的动画过渡效果，适合用在一些等待刷新的页面！

效果如下：

具体代码实现

html:

css:

想读更多 ->

css3 属性实现画动态搞笑动画

css3 属性实现画动态搞笑动画

利用工作之余，可以用学过的知识，写一些好玩的效果

鼠标移上去后：

代码

html:

@keyframes

定义动画各个阶段的状态的代码段。比如开始态，结束态，中间态（使用百分比表示）。

animation-name

使用 @keyframes 定义的状态集合名称，如上面的 exampleName。

想读更多 ->