CSS3总结（干货）

1、css3中好用的选择器　　

:target　　　　　　 //突出显示活动的HTML锚

::after / ::before{content:" ";}　　//content必须有，若无内容，用空格占位

2、文字

　　a.导入字体： @font-face

　　b.文字阴影：text-shadow

　　ps:相关css

　　　　a.white-space: nowrap;　　　　//段落文本不换行

　　　　b.text-overflow:ellipsis;　　　　 //文本修剪（ellipsis变为省略号）

　　　　c.word-break: break-all　　　　//断字点换行

3、边框

　　a.border-radius　　　　//圆角

　　b.box-shadow　　　　 //阴影

　　　　制作三角形方法　　　

1   #div1{
2             width: 0;
3             border-width: 50px;
4             border-style: solid;
5             border-left-color: #f00;
6             border-top-color: #0f0;
7             border-right-color: #ff0;
8             border-bottom-color: #00f;
9         }

4、背景

　　a.background-clip　　　　//对背景图片进行切割，不完整背景（border-box, padding-box, content-box）

　　b.background-origin　　　//对背景图片设置起始点，完整背景（border-box, padding-box, content-box）

5.弹性盒模型

　　a.box-flex　　　　　　　　//在一个div中占几份

　　b.box-ordinal-group　　　 //div的显示次序（包含在含有css display:box;中）

　　c.flex-direction　　　　　 //元素排列顺序【row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。row-reverse：对齐方式与row相反。column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。column-reverse：对齐方式与column相反。】（与display:flex;同时使用）

6、新旧弹性盒模型比较

　　a.在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box:

　　　　新版弹性盒模型：flex：display : flex

　　　　老版弹性盒模型：box : display : -webkit-box

　　b.使用box-orient 定义盒模型的主轴方向

　　　　新版：flex：flex-direction: row / column

　　　　老版：box : -webkit-box-orient:

　　　　　　　　　　horizontal 水平显示

　　　　　　　　　　 vertical 垂直方向

　　c.box-direction 元素排列顺序

　　　　新版：flex : flex-direction: row-reverse / column-reverse;

　　　　老版：box : -webkit-box-direction:

　　　　　　　　　normal 正序

　　　　　　　　　reverse 反序

　　d.box-pack 主轴方向空闲空间设置

　　　　新版：flex : justify-content : flex-start / flex-end / center / space-between / space-around;

　　　　老版：box : -webkit-box-pack

　　　　　　　　start 所有子元素在盒子左侧显示，富裕空间在右侧

　　　　　　　　end 所有子元素在盒子右侧显示，富裕空间在左侧

　　　　　　　　center 所有子元素居中

　　　　　　　　justify 富裕空间在子元素之间平均分布

　　e.box-align 侧轴方向方向空闲空间设置

　　　　新版：flex : align-items : flex-start / flex-end / center / baseline

　　　　老版：box : -webkit-box-align

　　　　　　　　start 所有子元素居顶

　　　　　　　　end 所有子元素居底

　　　　　　　　center 所有子元素居中

　　f.box-flex 定义盒子的弹性空间

　　　　新版：flex : flex-grow

　　　　老版：box : -webkit-box-flex

　　g.box-ordinal-group 设置元素的具体位置

　　　　新版：flex : order

　　　　老版：box : -webkit-box-ordinal-group

　　ps:css3兼容：

　　　　　　-webkit-

　　　　　　-moz-

　　　　　　-ms-

　　　　　　-o-

　　　　　　属性

7、transform常用用法

　　transform: rotate(45deg);　　//2D旋转

　　transform: translate(x, y);　　//2D移动

　　transform:scale(x,y):　　　　//2D缩放

　　transform:skew(xdeg,ydeg):　　//2D扭曲（平行四边形）

　　transform:rotate(x,y,z)　　　　 //需要perspective属性改变视图（视角）

8、translation

　　translation: 哪个属性过度（eg:width）过渡完成需要时间速度何时开始

更多专业前端知识，请上【猿2048】www.mk2048.com

CSS3总结（干货）相关推荐

loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
css3 下边框缓缓划过_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果？...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
图片流_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
CSS3干货13：把页面变成黑白灰色彩
2020年的第一季度,一场突如其来的疫情,让整个世界蒙上了阴影. 明天(4月4日),国家将进行哀悼活动.作为 IT 人,我也想要用自己的行动为这场疫情中s去的英雄和群众表示深切的哀悼. 短短的几行 C ...
CSS3干货9：做一个弹跳动画
先看效果步骤1:准备一个 div 标签 <div class="ball"> </div> 分析一下: 这个效果上有两个内容:球 , 影子. 球是这个di ...
CSS3干货15：旋转摩天轮
今天做项目,无意看到个摩天轮效果,甚是有意思,决定自己来做做.原效果是JS 写的,我懒得用JS,就用 CSS3 写一个.那么多美女围绕着转,开心的要死,所以放了个单纯的小男孩在中间代表我的心情~ 效果 ...
CSS3干货23：常用字体样式设置
一.字体颜色 color: 颜色;color:#f30; color:rgb(255,100,0); color:rgba(255,100,0,0.4); 二.字体设置 font-family:Ari ...
CSS3干货14：自定义页面滚动条
自定义滚动条最早是 IE 玩出来的,但是后来, 不知道为什么 IE 把这个有意思的功能废弃了. 现在各大浏览器又想重新拿起来这个功能,但是显得就有点混乱了,做的最好的还是 webkit 内核的浏览器. ...

CSS3总结（干货）

CSS3总结（干货）相关推荐

最新文章

热门文章