css3的学习笔记

适合初学者以及没看过css3的人快速了解css3的主要内容。

1.opacity ----------------------取值0-1之间,给整个元素和其所有子元素设置透明度级别

2.css选择器----------------------http://www.w3school.com.cn/cssref/css_selectors.asp 其中li:nth-child(2n+1)表示选择基数个(可以类推)

input:not([type="submit"]) 可以做否定的选择

3.html5兼容浏览器老版本对标签不识别问题 <!--[if Lt IE 9 ] [removed] [removed]

4.文本阴影

text-shadow:1px 1px 1px white; 右偏移,左偏移, 模糊程度(1个PX相当于一个轮廓) ,颜色

5.多出的文本隐藏和显示

overflow:hidden;text-overflow:ellipsis; hover 伪类加上overflow:hidden;text-overflow:ellipsis;text-overflow:inherit; overflow:visible;

6.圆角 border-radius:10px 10px 10px 10px (左上,右上,右下,左下) 可以写一个值,所有角都是统一的,也可以写2个值表示左上,右上以及和他们相对的角,也可写 10px/50px.表示该角按x,y轴的偏移来画弧

7.阴影 box-shadow:0 0 10px #666; 第一个值为x 偏移(可以为负,表示右边), 第二个值为y偏移(可以为负,表示上边),第三个值为模糊的长度,第四个值为 阴影颜色。

8.渐变 linear-gradient(to right,#ff0000 50%,#007700 50%); 第一个值可以为to right ,to top right ,等线性值。后面的为 渐变的颜色,可以有多个值,可以手动加百分比,,可以自动让其渐变。

repeateing- linear-gradient 为重复渐变 radial-gradient(50% 50%, 60% 60%,rab(75,75,255),rgb(0,0,0) ); 径向渐变,,第一个值为渐变的原点,第二值为渐变的大小位置。渐变可以用rgba的颜色值

9.多重背景 background-image:url(bg_flower.gif),url(bg_flower_2.gif); 可添加多个URL,放置图片

background-size:63px 100px;控制尺寸,可以按像素,可以按比例

background-origin:content-box;可以选择填充范围

10.边框图片

border-image:url(border.png) 30 30 30 30 round; 数字代表图片裁减成边框切片的宽度

动画-------------------------------------------------------------------------------------

11.2D变形

transform

transform:translate(-50%,-50%); 移动 ,当前元素向左移动该元素的一半宽度,和向上移动高度的一半,值可以有正负,可以为像素,可以为百分比(当指定一个值时默认为x)

transform: rotate(15deg); 旋转 ,当前元素顺时针旋转多少度。(默认是按中心点)

附:transform-orgin:top left;设置变形的中心点,可以为px,rem,em,cm等值,也可以百分比,也可以关键词,如center,bottom right等

transform:scale(1.25,0.8); 缩放 ,按比例缩放大小,当为一个值时候,默认x,y都按这比列,也可以单独对x,y设置,scaleX,scaleY

transform:skew(10deg,13deg); 旋转 ,x,和y的值是沿着坐标轴倾斜的度数,可以单独设置skewX,skewY

12.3D变形

transform:translate3D(100px,100px,100px);X,Y,Z移动;

transform: rotateX(15deg);按X轴旋转,也有rotateY,rotateZ

transform: rotate3D(1,0,1,15deg);3D旋转,前3个表示立体面中的向量值,然后沿着那个面旋转

transfrom:perspective(200px);透视的值,是按像素值,就是看一个东西的角度,perspective-orgin:center;透视的中心,该值和变形中心一样的取值方法;

transfrom-style:preserver-3d; 多个元素3D变形时候,不会出现信息丢失,遮盖等情况。

backface-visibility:hidden;表示当元素背对我们的时候不显示

13.过度 transition

transition-property:width;过度的属性值,可以为高,宽,甚至可以为transform------必写属性

transition-duration:0.5s; 过度的时间,默认为0------必写属性

transition-timing-function:liear;过度的速率,默认为easy;linear(相同速度),ease(逐渐变慢),ease-in(加速),ease-out(减速),ease-in-out(加速然后减速)

transition-delay:1s;延迟时间

可以简写transition:opactity 3s eas-in 1s,opactity 3s eas-in 1s;多个属性‘,’隔开,属性顺序为,属性值、过度时间、速率、延迟时间,

14.动画 animation

animation-name:cc;名称

animation-duration:1.5s;动画持续时间

animation-iteration-count:infinite;播放次数,默认是1次,无限循环的时候是infinite;

animation-delay:2s; 延迟时间;

animation-timing-functuin:linear;linear(相同速度),ease(逐渐变慢),ease-in(加速),ease-out(减速),ease-in-out(加速然后减速)----和过度是属性是一样的

animation-direction:alternate;播放结束后循环播放的顺序,默认是从头循环,alternate是0%----100%-----0%从头到尾在从尾到头。

animation-fill-mode:none;属性规定动画在播放之前或之后,其动画效果是否可见,forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。both:向前和向后填充模式都被应用。

可以简写 animation:cc 1.5s ease-in 3s 25 alternate backwards;多个动画的时候‘,’隔开

布局--------------------------------------------------------------------------------------

15.多栏布局 column

column-count:3; 规定元素应该被分隔的列数。

column-width:200px; 规定元素应该按该宽度去分列数。

column-gap:10px;;栏目之间的间隔距离

column-rule:3px solid #666; 栏目和栏目之间的那个线,属性和border是一样的;

column-fill:balance;填充方式,默认是auto,从左往右一次填充, balance是每个栏目基本内容填充的都差不多

column-span:3;宽栏目设置,可以设置某个在栏目中的元素,所跨的栏目数

16.流动布局 flexbox

display:flex;布局模型设置为flexbox;

flex-flow:row warp;排列方式,row为横向,column为垂直。warp为自动换行。

order:1;控制子元素的排列顺序;( 属性写在子项上)

justify-content:center;子项的内容排列;有,flex-start,flex-end,center,space-between,space-around,

algin-items:center;让子项沿着当前的方向侧轴进行排列,值有。flex-start,flex-end,center,baseline,stretch. (algin-self为子项属性,当用于子项时候,会重写algin-items值)

flex:1 1 200px;(属性写在子项上面)第一个参数是按比例分配父亲元素的剩下份额,第二个是,按比例分配当元素溢出后产生的值。然后子项减去该值。第三个为该元素的值。

17.网格布局 grid

display:grid;布局模型设置为grid的网格

grid-columns:10rem 40rem 30rem;设置3列大小为10rem 40rem 30rem;

grid-rows:1fr 1fr 1fr 1fr;设置为4行,fr为份数,总份数为该值所有加起来;

子元素属性

grid-column:1;子元素选择第几列;

grid-column-span:2;子元素以当前列为启示,选择跨越的列数;

grid-row:2;子元素选着第几行;

grid-row-span:2;子元素选择跨越的的行数,当前行为起始;

18.清除 wrap-flow:both;排除

auto默认值,如果采用该值,周围的文本不再环绕排除项区域,它只会位于排除项元素的低下,就好像排除项不存在一样。

start意味着内容在排除项区域的开始侧环绕,但是在排除项区域的结尾侧保留为空的内容。

end意味着内容在排除项区域的结尾侧环绕,但是在排除项区域的开始侧保留为空的内容。

both意味着内容在排除项开始和结尾(即四周)环绕。

maxinum会让内容向排除项有最大空间的一侧环绕。

clear意味着内容只能在排除项的上下两侧环绕,并且排除区域的左右(开始和结尾)两侧保留为空。

warp-margin:10px;指定其他剩余内容与排除项元素之间的外边距。

warp-padding:10px;指定其他剩余内容与排除项元素之间的内边距。

19.媒体查询

@media all and(min-width:400px)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贺贺的前端工程师之路

Flex Box布局学习- 语法

上一篇,我学习并整理了使用flex时,需要注意的兼容性问题。那么今天就来学习一下有关flex语法的东西。

713
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之border

1、border-width   border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。   bor...

3079
来自专栏程序你好

CSS盒子(Box)模型入门

无论您是CSS的新手还是经验丰富的老手,了解和理解box模型都很重要。让我们更好地了解它。

1112
来自专栏Crossin的编程教室

【编程课堂】海龟作图

0、前言 turtle 是 python 内置的一个比较有趣味的模块,俗称 海龟作图,它是基于 tkinter 模块打造,提供一些简单的绘图工具,海龟作图最初...

3866
来自专栏前端知识分享

第157天:canvas基础知识详解

    github地址: https://github.com/malun666/AndyJS2

2032
来自专栏HTML5学堂

CSS3蒙版 — 元旦快乐!

相信大家如果对PS有所了解都知道里面有蒙版遮罩层的效果,可我们在这里并不打算介绍PS的蒙版效果,而是介绍在内核为-webkit的浏览器中通过CSS3的新属性-w...

36310
来自专栏IMWeb前端团队

网格系统 CSS Grid Layout

听闻w3cplus大漠在第三届CSS Conf上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝...

2038
来自专栏Android常用基础

自定义View(一)-动画- XML生成View动画

感觉好久没有写博客了。首先因为最近比较忙,有在学习即时通讯相关的开源项目,好不容易忙完了。有点时间就抓紧写博客。之前学习的开源项目百篮应用已经获得360+sta...

951
来自专栏前端说吧

css布局 - 九宫格布局的方法汇总(更新中...)

其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

1502
来自专栏tkokof 的技术,小趣及杂念

HGE系列之九 管中窥豹(精灵动画)

这次的HGE之旅,让我们来看看精灵及动画的实现,毕竟对于一款2D游戏引擎来说,恐怕精灵和动画不是最重要的,也可算是最重要之一了吧:)

892

扫码关注云+社区