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

相关文章

来自专栏数据小魔方

think-cell chart系列2——堆积百分比柱形图!

今天要跟大家分享的是think-cell chart系列的第二篇——堆积百分比柱形图! 我们还是先欣赏一下使用think-cell chart制作的堆积百分比柱...

4159
来自专栏极客编程

html5 canvas 与小丑。

  以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面——任何一个Web程序...

542
来自专栏腾讯NEXT学位

我不知道你知不知道但前端NEXT知道的伪元素小技巧

3377
来自专栏前端新视界

给单元素艺术添加动画

原文:Animating Single Div Art 翻译:nzbin 导读:学习工具的最好的方法就是尝试新技术,本文通过“单元素艺术”介绍了 CSS 变量的...

1975
来自专栏企鹅号快讯

HTML5&CSS3初学者指南(4)–Canvas使用

问题:我怎么才能收到你们公众号平台的推送文章呢? 介绍 传统的HTML主要用于文本的创建,可以通过标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HT...

1798
来自专栏柠檬先生

css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。   主要包括四个属性:     执行变换的属性:...

20910
来自专栏应用案例

D3.js 满足你对数据可视化的一切幻想

D3.js D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript...

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

HTML5 & CSS3初学者指南(4) – Canvas使用

介绍 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力...

1836
来自专栏Windows Community

New UWP Community Toolkit - RadialProgressBar

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

35910
来自专栏前端儿

CSS3的变形transform、过渡transition、动画animation学习

变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作,通过例子来了解各个操作

581

扫码关注云+社区