- CSS3 backface-visibility 属 11-25
- 每天学点CSS3专题:CSS3新增的文本样式实现字体 11-25
- CSS3 content属性学习 11-25
- css3九宫格图片延伸特效 11-25
- CSS3实现截断文字效果 11-25
- CSS3 perspective-origin 属性 11-25
- CSS3 column-rule 属性 11-25
- CSS3 hanging-punctuation 属 11-25
- CSS3 background-origin 属性 11-25
- CSS3 box-sizing 属性 11-25
CSS3 backface-visibility 属性
发布者: superzhang | 发布时间:2017-11-25实例
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- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性backface-visibility36.012.0 -webkit-10.016.010.0 -moz-每天学点CSS3专题:CSS3新增的文本样式实现字体模糊效果
发布者: superzhang | 发布时间:2017-11-25在昨天我们知道了什么是rgba后,今天我们就来继续学习css自带的文字阴影样式来制作字体模糊效果。在此之前我们先学习下文字阴影样式text-shadow.
学习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属性学习
发布者: superzhang | 发布时间:2017-11-25css3中出现了 ":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九宫格图片延伸特效
发布者: superzhang | 发布时间:2017-11-25css3九宫格图片延伸特效
需要源码请加前端交流群547931294
源码知识点:Html/css布局思维,浮动、定位、盒子模型详解,js鼠标事件、自定义拖拽功能等,2017年就业形势分析
ps.因代码过长,不太适合阅读,只发部分源码思路。
完整的免费源码以及视频思路讲解,请评论后加下前端学习交流群:547931294获取!切记!切记!切记!
需要源码请加前端交流群547931294
CSS3实现截断文字效果
发布者: superzhang | 发布时间:2017-11-25在开发中也许会有这样的需求,一个容器内的文本内容超出了容器的既定宽度时需要把文本隐藏掉。
但为了更好的用户体验我们可以在最后加几个省略号(....)。如何实现这样的效果呢?
用js操作显示文本可以实现,但是CSS3可以更加轻松的实现这种效果。
样式
显示效果如图:
效果
可以看出,主要的属性是text-oveflow:ellipsis;它规定了当文字溢出时就显示为省略号。
但是该效果只对单行文本有效,因为存在white-space:nowrap;规定了元素对于空白字符的处理方式决定的。
CSS3 perspective-origin 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置一个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- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性perspective-origin36.012.0 -webkit-10.016.010.0 -moz-9.04.0.3 -webkit-23.015.0 -webkit-浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性column-rule50.04.0 -webkit-10.02.0 -moz-9.03.1 -webkit-37.015.0 -webkit11.1CSS3 hanging-punctuation 属性
发布者: superzhang | 发布时间:2017-11-25实例
p元素的第一行开始边缘放置一个标点符号:
p
{
hanging-punctuation:first;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性hanging-punctuation不支持不支持不支持不支持不支持目前主流浏览器都不支持 hanging-punctuation 属性。
属性定义及使用说明
hanging-punctuation属性指定一个标点符号是否会在启动或在结束时文本行框以外。
默认值:none继承:yes版本:CSS3JavaScrCSS3 background-origin 属性
发布者: superzhang | 发布时间:2017-11-25实例
内容框相对定位的背景图片:
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性background-origin4.09.04.03.010.5标签定义及使用说明
background-Origin属
CSS3 box-sizing 属性
发布者: superzhang | 发布时间:2017-11-25实例
指定两个boxes接壤:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性box-sizing10.04.0 -webkit-8.029.02.0 -moz-5.13.2 -webkit-9.5