码迷,mamicode.com
首页 > Web开发 > 详细

CSS3知识总结

时间:2018-08-15 22:43:55      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:position   滤镜   isp   其他   像素   分割   dir   spl   应对   

边框

|------盒子圆角

|---------border-radius:5px / 20%;

|---------border-radius:5px 4px 3px 2px; 左上,右上,右下,左下

|------盒子阴影 box-shadow:

|---------box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度)  阴影扩展半径 阴影颜色  投影方式
注意:inset 是指阴影在盒子内部,默认在外部,inset写到第一个或者最后一个参数位置,其他位置是无效的

|---------值有3个时,表示距离左侧、距离上侧、影子颜色

|---------值有4个时,表示距离左侧、距离上侧、虚化的像素、影子颜色

|---------值有5个时,表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转

|---------负值时,在相反的方向

背景

|------引入  background-image

|------背景尺寸  background-size

|---------auto 默认值,不改变大小

|---------cover 填充整个外层容器

|------背景平铺 background-repeat

|------背景位置

|---------位置定位1(background-origin)

|------------根据文本位置:content-box

|------------根据边框位置:border-box

|------------根据内边距位置:padding-box

|------------使用这个属性,必须设置背景为no-repeat

|---------位置定位2(background-position)

|------------top

|------------bottom

|------------left

|------------right

|------------background-position:距左多少   距右多少

|------多重背景

逗号分割:background-image:url(images/bg_flower.gif), url(images/border.png); background-repeat:no-repeat;

字体

|------文本阴影

|---------text-shadow:三个值:分别代表距离左侧、距离上侧、阴影颜色  阴影会显示文字

|---------text-shadow:四个值:分别代表距离左侧、距离上侧、模糊程度及阴影颜色

|------文本溢出属性

|---------overflow: hidden;  white-space:nowrap;让文本强制不换行  要先设置这两个属性

|---------text-overflow

|------------clip:修剪文本。

|------------ellipsis:显示省略符号来代表被修剪的文本

|------------自定义(string):自己定义符号,给定的字符串来代表被修剪的文本

|------文本换行属性 word-break:

|---------word-break:break-all 它的内容就会到200px自动换行 如果该行末端有个英文单词很长会把单词截断。

|---------word-break:break-word; 如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断。

颜色RGBA与透明度opcity

|------R:红 G:绿 B:蓝  alpha:透明度的参数

|------RGB的取值范围是0~255/0~100%   alpha的取值范围是0~1  不可为负值

|------opcity:范围0-1

渐变颜色

|------background-image: linear-gradient(to bottom,#fff,red);参数说明:第一个参数指定渐变方向 to top,to bottom,to right,to left,to top left......
第二和第三个参数:是指定开始与结束的颜色值  可以有多个颜色background-image: linear-gradient(to bottom,#fff,black,red);

图片

|------图片圆角 border-radius: 50%;(设置椭圆形)

|------设置图片为响应式  max-width: 100%;height: auto;

|------图片阴影 box-shadow

|------图片滤镜  filter

旋转

|------2D transform

|---------rotate()——进行旋转,括号内部写旋转角度,默认顺时针旋转.允许负值,元素将进行逆时针旋转

|---------translate()——从当前位置进行移动,括号内为x,y值。允许负值,将反方向移动
transform:translate(30px,30px):向右30px,向下30px移动,原来位置保存

|---------scale()——改变原始尺寸,按照倍数变化,括号内为width、height的倍数
 transform:scale(2,4):宽度变为2倍,高度变为4倍

|---------skew()——水平、垂直方向进行扭转,括号内是水平扭转角度、垂直扭转角度
 transform:skew(30deg,0deg);将横向扭转30度的div,内部文字会跟随扭转
 transform:skew(0deg,30deg);将纵向扭转30度的div,内部文字会跟随扭转
 transform:skew(30deg,30deg);将横向扭转30度、纵向扭转30度的div,内部文字会跟随扭转

|------3D transform

|---------rotateX()——沿水平X轴进行垂直的翻转,括号内写转动度数

|---------rotateY()——沿垂直Y轴进行水平的翻转,括号内写转动度数

|------2D与3D的区别

2D转换跟3D转换的区别:2D转换仅仅在于平面,文字可以看出并没有反过来.3D转换是相当于镜面效果的,进行了前后空间(涉及到了Z轴)的占用进行的翻转。

过渡

|------transition:专门应对颜色、长度、宽度、位置等变化的过渡

#aaa{
            width:200px;
            height: 200px;
            border: 1px solid red;
            transition:2s;
        }

弹性盒子 CSS3的一种新的布局模式

|------定义为弹性盒子

|---------display: flex;考虑浏览器兼容问题

|------弹性子元素在父容器中的位置排列(横向、纵向) flex-direction
|--------- row:横向从左到右排列(左对齐),默认的排列方式。

|---------row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
|---------column:纵向排列。
|---------column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

|------弹性盒子的子元素换行方式

|---------nowrap - 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行。wrap-reverse -反转 wrap 排列

|------弹性子元素在父容器中的对齐方式

|---------横向对齐 justify-content:

|---------纵向对齐 align-items:

|------弹性子元素如何分配空间 flex

.flex-container {
    display: flex;
    width: 400px;
    height: 250px;
}
.item1 {
    flex: 2;
}

.item2 {
    flex: 1;
}

.item3 {
    flex: 1;
}

|------子元素的属性

|---------order 排序

|---------margin 间距

|---------align-self 轴对齐方式

CSS3知识总结

标签:position   滤镜   isp   其他   像素   分割   dir   spl   应对   

原文地址:https://www.cnblogs.com/q-1234/p/9484259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!