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 条评论
登录 后参与评论

相关文章

来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

952
来自专栏软件开发

CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档。 一、阴影 1....

2845
来自专栏Windows Community

New UWP Community Toolkit - RadialProgressBar

概述 UWP Community Toolkit  中有一个圆形的进度条控件 - RadialProgressBar,本篇我们结合代码详细讲解  RadialP...

37210
来自专栏用户2442861的专栏

HTML/CSS基础知识学习笔记

http://www.cnblogs.com/scue/p/4276339.html

581
来自专栏前端布道

CSS技巧和经验

1. 如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 img { ...

3557
来自专栏小灰灰

cocos2dx-v3.4 2048(四):单元格的设计与实现

前言 ---- 单元格即显示2、4、8等数字的不同颜色的方格,如下图。本项目中Grid类实现单元格的相关内容,包括数字、背景更新,移动、新增、消除特效 ? ...

1806
来自专栏武军超python专栏

2018年9月9日用HTML开发网页的总结

今天学到的新单词: relationship n关系 inherit v继承 rel:relationship的英文缩写·REL属性用于定义链接的文件...

1296
来自专栏落影的专栏

iOS开发-OpenGL ES入门教程1

前言 这里是一篇新手教程,环境是Xcode7+OpenGL ES 2.0,目标写一个OpenGL ES的hello world。 OpenGL ES系列教程在...

3039
来自专栏知道一点点

八种创建等高列布局【出自w3c】

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可...

864
来自专栏葡萄城控件技术团队

使用CSS 3创建不规则图形

前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解...

20010

扫码关注云+社区