CSS3 backface-visibility 属性

实例

Hide the backside of a rotated div element:

div

{

backface-visibility:hidden;

-webkit-backface-visibility:hidden; /* Chrome and Safari */

-moz-backface-visibility:hidden; /* Firefox */

-ms-backface-visibility:hidden; /* Internet Explorer */

}

浏览器支持

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

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

想读更多 ->

每天学点CSS3专题：CSS3新增的文本样式实现字体模糊效果

在昨天我们知道了什么是rgba后，今天我们就来继续学习css自带的文字阴影样式来制作字体模糊效果。在此之前我们先学习下文字阴影样式text-shadow.

text-shadow属性介绍

text-shadow：x y blur color, …

参数 x横向偏移 y纵向偏移 blur模糊距离 color阴影颜色

简单用法

text-shadow:2px 2px 4px black

html代码片段

<div class="box">每天学习一点点</div>

css样式

.box{

width:5

想读更多 ->

CSS3 content属性学习

css3中出现了 ":before",":after"伪类，

你可以这样写：

h1:after{

content:'h1后插入的文本';

...}

这两个选择器的作用以及效果，这里就不在介绍了；主要说一下上面提到的一个css属性【content】用来和:after及:before伪元素一起使用，在对象前或后显示内容。

content的取值：

normal：默认值。表现与none值相同

none：不生成任何值。<attr>：插入标签属性值<url>：使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）<string>：插入字符串

counter(name)：使用已命名的计数器

counter(name,list-style-type)：使用已命名的计数器并遵从指定的list-style-type属性

counters(name,string)：使用所有已命名的计数器

counters(name,string,list-style-type)：使用所有已命名的计数器并遵从指定的list-style-type属性

no-close-quote：并不插入quot

想读更多 ->

css3九宫格图片延伸特效

css3九宫格图片延伸特效

需要源码请加前端交流群547931294

源码知识点：Html/css布局思维，浮动、定位、盒子模型详解，js鼠标事件、自定义拖拽功能等，2017年就业形势分析

ps.因代码过长，不太适合阅读，只发部分源码思路。

完整的免费源码以及视频思路讲解，请评论后加下前端学习交流群：547931294获取！切记！切记！切记！

需要源码请加前端交流群547931294

想读更多 ->

CSS3实现截断文字效果

在开发中也许会有这样的需求，一个容器内的文本内容超出了容器的既定宽度时需要把文本隐藏掉。

但为了更好的用户体验我们可以在最后加几个省略号(....)。如何实现这样的效果呢？

用js操作显示文本可以实现，但是CSS3可以更加轻松的实现这种效果。

样式

显示效果如图:

效果

可以看出，主要的属性是text-oveflow:ellipsis;它规定了当文字溢出时就显示为省略号。

但是该效果只对单行文本有效，因为存在white-space:nowrap;规定了元素对于空白字符的处理方式决定的。

想读更多 ->

CSS3 perspective-origin 属性

实例

设置一个3D元素的基数位置：

div

{

perspective:150;

perspective-origin: 10% 10%;

-webkit-perspective:150; /* Safari and Chrome */

-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */

}

浏览器支持

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

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

浏览器支持

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

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

想读更多 ->

CSS3 hanging-punctuation 属性

实例

p元素的第一行开始边缘放置一个标点符号：

p

{

hanging-punctuation:first;

}

浏览器支持

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

目前主流浏览器都不支持 hanging-punctuation 属性。

属性定义及使用说明

hanging-punctuation属性指定一个标点符号是否会在启动或在结束时文本行框以外。

想读更多 ->

CSS3 background-origin 属性

实例

内容框相对定位的背景图片：

div

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-position:left;

background-origin:content-box;

}

浏览器支持

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

标签定义及使用说明

background-Origin属

想读更多 ->

CSS3 box-sizing 属性

实例

指定两个boxes接壤：

div

{

box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

width:50%;

float:left;

}

浏览器支持

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

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