标签：style 坐标系 完全 order Fix lex 创建 重复 没有
文本新增属性
一、文字阴影
用法： text-shadow: h-shadow v-shadow blur color;
可以一次设置多层阴影，用逗号分开，如下，
text-shadow: -5px -10px -5px mediumpurple, 5px 10px 5px pink;
二、文字描边
用法：-webkit-text-stroke: px值 color;
-webkit-text-stroke:4px pink;
此属性还未完全进入w3c标准，所以需要加上-webkit-前缀，在chrome上运行
三、文字排版
用法：
direction: 排版方向;
unicode-bidi:bidi-override; （配合这句代码使用）
排版方向有如下八个，
四、文字溢出部分显示省略号
共有四步：
(1)限宽盒子模型
width:number值px;
(2)文本不换行
white-space:nowrap;
(3)该盒子设置溢出部分隐藏
overflow:hidden;
(4)溢出部分省略号代替
text-overflow:ellipsis;
盒模型新增属性
一、盒模型阴影
用法：box-shadow: h-shadow v-shadow blur spread color; （外阴影）
box-shadow: 10px 10px 30px 40px blueviolet;
还可为盒子同时设置外阴影和内阴影，之间用逗号隔开，如下：
box-shadow: 0 0 30px 30px #000, inset 0 0 30px 10px yellow;
二、盒模型倒影
用法：-webkit-box-reflect: 方向值 px值 linear-gradien(用法如下);
方向值可取值有如下7个，px值表示盒子和倒影之间的间隔大小
linear-gradient(-90deg,rgba(0,0,0,1) 0,rgba(0,0,0,0) 70%)
默认自上而下渐变，渐变方向可以改变，百分比表示渐变到这里截至
三、通过拖拉盒模型右下角来重置盒模型大小
resize: val;
overflow:auto; （不可少）
其中val可以是both表示水平垂直方向都可重置，horizontal表示只可水平方向重置，vertical表示只可垂直方向重置
四、使用width、height固定死盒模型的大小，使其大小不会因盒子本身border值或padding值的改变而改变
box-sizing: border-box;
五、盒模型圆角
border-radius: px值;
作用：设置盒子四个角的弯曲度
只写一个px值，代表作用于所有角，写多个px值时，作用顺序可参看下图
另一种书写形式如下所示（原理是利用椭圆的短长轴）
新增UI样式
一、边框图片
该样式较为复杂，截图说明，如下所示：
设置边框图片需要提供一个九宫格图片，为border-image-slice属性设置百分比或具体数值（注意不加px）来分隔图片，为border-image-repeat属性设置伸缩方式，到这已经可以实现边框图片效果。
二、盒模型背景图片（1、2、3属性在css2就有了，因为比较重要，特意列出！）
盒模型的背景图片默认显示在盒模型的内容区、padding区、右下border区。或则说成是盒模型背景图片绘制于padding区，截止于右下border区
(1)background-image
作用：设置背景图片
可以设置多个背景图片，多个url用逗号隔开
background-image:url(img/lhh.png), url(img/lzp.png);
(2)background-position
作用：设置背景图片的位置。默认背景图片左上角和盒模型除去边框后的左上角重合
取值为百分比时，0% 0%表示图片左上角和盒模型左上角重合，100% 100%表示图片右下角和盒模型右下角重合
取值为px值时，正值：背景图片右移动或者下移动；负值：背景图片左移动或者上移动（这种情况实际开发中用的较多，常用于控制精灵图）
两种取值方式都是，第一个值为x轴偏移量，第二个值为y轴偏移量，如果只设置一个值，这个值表示x轴偏移量，y轴会隐式设置为居中效果
(3)background-attachment
作用：设置背景图片相对于谁固定
取值为fixed，表示相对于浏览器视口固定，默认是相对于浏览器视口的左上角
取值为scroll，该属性默认值就是scroll，表示相对于该盒模型除去边框后的左上角固定
(4)background-size
作用：规定背景图片的尺寸
取值为普通值，如10px，直接设置背景图像的宽度和高度
取值为百分比时，参照盒模型自身尺寸（不包含盒子边框大小）来设置背景图像的宽度和高度，若取为100% 100%，背景图片会填满盒子，图片可能会出现拉伸现象
两种取值方式都是，第一个值设置宽度，第二个值设置高度。如果只设置一个值，这个值表示设置宽度，第二个值会被隐式设置为 "auto"
(5)background-origin
作用：设置背景图片的渲染起始位置，默认是从padding-box开始的
可选值有3个：padding-box、border-box、content-box
(6)background-clip
作用：设置背景图片的渲染截止位置（如果设置有背景色，该属性会一并影响背景色的渲染效果）
可选值有4个：padding-box、border-box、content-box、text
注意：text，表示使用文本截止背景渲染，即只在文字内渲染背景图片，使用text值时，属性要加前缀-webkit-，还要将文本设置成透明色
(7)线性渐变
linear-gradient(direction, color1 percent1, color2 percent2, ...)
作用：为盒模型创建一个颜色线性渐变的背景色
direction：默认自上而下渐变，可通过direction该变渐变方向，direction可取值有角度如-90deg、方向如to right。角度值0deg表示自上而下渐变，角度值为正 顺时针变换，为负 逆时针变换。方向值有八个，分别是：top、top right、right、bottom right、bottom、bottom left、left、left top
color：可取具体颜色值，也可取rgba()透明色
percent：表示各个颜色的颜色阈值，从0%至100%，如果不从0%开始或者不在100%结束，这些区域就用对应的纯色填充，默认均匀分布
background: linear-gradient(90deg, red 10%, orange 15%, yellow 20%, pink 30%, blue 50%, indigo 65%, violet 80%);
重复渐变
repeating-linear-gradient()
用法如上，需要配合颜色阈值使用
background: repeating-linear-gradient(to right, red 10%, pink 30%);
(8)径向渐变
radial-gradient(fcsc xingzhuang, color1 percent1, color2 percent2, ...)
默认，盒子为正方形就以圆形扩散渐变，为长方形就以椭圆扩散渐变，而且在盒子模型中心到顶角的方向上均匀分布
可通过xingzhuang值改变渐变的形状，可选值有circle（圆）、ellipse（椭圆）
可通过fcsc值改变渐变的结束位置，可选值有farthest-corner（最远角）、closest-corner（最近角）、farthest-side（最远边）、closest-side（最近边）
若形状为圆形，还可改变圆心位置，如下所示，
background: radial-gradient(closest-corner circle at xpx ypx, red, pink);
at后的px值相对于盒子模型去除边框后的左上角进行偏移
重复渐变
repeating-radial-gradient()
需要配合颜色阈值使用
三、过渡
css样式变化往往一瞬间完成，transition提供了一种机制，可以让css样式变化成为一个持续一段时间的过程。
用法：transition: property duration timing-function delay; （从display: block;到display: none;属性变化没法设置过渡）
transition属性是一个简写属性，用于依次设置以下四个过渡属性：
transition-property：指定过渡动画的属性（指定多个变化的属性时用逗号隔开，其他三个过渡属性的设置应与之一一对应）
transition-duration：指定过渡动画的时间（单位可以是s、ms，如果是0也要加上一个单位，否则不会出现过渡效果）
transition-timing-function：指定过渡动画的形式，可取值有linear（匀速）、ease（先快后慢）、ease-in（越来越快）、ease-out（越来越慢）
transition-delay：指定过渡动画的延迟（单位可以是s、ms）
transitionend：当过渡完成后，会触发该事件
如果简写属性transition中只有一个时间值，给transition-duration。例子，transition: 2s 3s width,3s height; （谁需要过渡动画这种效果，就把transition属性写在谁的css样式里）
注意：浏览器对css的解析速度极快，如果说一个属性在正要触发过渡时被替换成另一个了，就是替换之后的属性触发过渡；
元素在页面渲染还没有结束时，属性改变不触发过渡；（这种情况往往出现在js代码中少写了window.onload，从而导致没有等页面绘制完，就去改变属性）
四、2D变换
变换也是瞬间完成，和过渡配合使用，就有了美妙的动画效果
变换只关注元素变换前的开始状态和变换后的结束状态
transform：只对块级元素生效，默认以元素中心为基点做变换，可通过transform-origin属性改变元素基点
(1)平移
transform: translate(xpx, ypx); 表示相对自己原来的位置进行平移，取值百分比时表示相对自身大小。
translateX()表示只在X轴方向上平移
translateY()表示只在Y轴方向上平移
(2)旋转
transform: rotate(deg)
取值为一个角度值，单位deg
rotateX()表示围绕贯穿元素基点的X轴做旋转
rotateY()表示围绕贯穿元素基点的Y轴做旋转
(3)倾斜
transform: skew(xdeg, ydeg);
理解xdeg的取值时，如果为正值，可以理解成在X轴正方向上倾斜了xdeg，为负值，就是在X轴负方向上倾斜了xdeg
skewY()表示只在Y轴方向上倾斜
skewX()表示只在X轴方向上倾斜
(4)缩放
transform: scale(数字值);
取值为1表示不缩放，取值为0表示缩小至消失
取值小于1表示缩小，取值大于1表示放大
取值为负数表示先消失后出现
scaleX()表示只在X轴方向上缩放
scaleY()表示只在Y轴方向上缩放
(5)基点（不算变换）
transform-origin: x y;用来改变元素的变换基点
以元素（包含边框）的左上角为原点建立浏览器坐标系，
x表示将元素基点置于X轴的何处
y表示将元素基点置于Y轴的何处
x的可取值类型有：left、center、right、px值、百分比
y的可取值类型有：top、center、bottom、px值、百分比
取值为百分比时，相对于元素（包含边框）自身大小，0% 0%表示基点在元素左上角（包含边框），100% 100%表示基点在元素右下角（包含边框）
(6)变换组合
变换原理是根据高数中的矩阵设计的，矩阵运算不满足交换律，所以一个元素同时有多个变换时，各个变换的书写顺序变了，呈现出的效果也不一样。
变换组合的执行顺序是从右往左执行。不是先执行完这个，再去执行下一下，而是通过矩阵运算，算出过渡结束时元素上各个点的坐标，直接往结束状态变换。
五、3D变换
比2D变换多了Z轴，Z轴特点是往屏幕里面是负值，往屏幕外面是正值
(1)平移
translateZ(zpx)表示只在Z轴方向上平移，取值只能是px值（视觉效果是缩放），如果zpx大于景深，超出景深的部分将看不到
translate3d(x, y, zpx)表示一次设置三个轴上的平移量
(2)旋转
rotateZ(deg)表示围绕贯穿元素基点的Z轴做旋转，取值是角度值，单位为deg，rotate()的默认效果就是rotateZ()
rotate3d(x, y, z, deg)
作用：(x, y, z)确定空间中的一个坐标点，该属性作用就是围绕着坐标系原点和该点确定的直线做旋转
(3)缩放
scaleZ(num)需要和translateZ(zpx)配合使用才有效果，num*zpx就是Z轴方向上移动的距离，从而产生缩放效果。必须先移动后缩放，就像transform: scaleZ(2) translateZ(100px);
scale3d(xnum, ynum, znum)表示一次设置三个轴上的缩放量
(4)基点
transform-origin: x y z;用来改变元素的变换基点
以元素（包含边框）的左上角为原点建立浏览器空间坐标系，
x表示将元素基点置于X轴的何处
y表示将元素基点置于Y轴的何处
z表示将元素基点置于Z轴的何处
x的可取值类型有：left、center、right、px值、百分比
y的可取值类型有：top、center、bottom、px值、百分比
z只能取px值
(5)景深（一种特殊的变换，不可继承）
景深就是在Z轴方向上元素到电脑屏幕的距离，景深越大，元素离我们越远，元素变形越小
有景深的元素称为舞台元素，舞台元素的所有后代元素都会具有该景深，如果后代元素也设置了景深，景深就叠加成为一个更大的景深，而不是覆盖掉
(5.1)给元素设置景深有两种方式，
a：通过transform属性 （作用于元素自身）
transform: perspective(px值), rotateZ(); （perspective()必须放在最前面）
案例，使用这种方式开启景深的div元素hover之后若要成功变换，div:hover所在的选择器中也需要设置一遍transform: perspective(px值), rotateZ(别的值);与div元素中transform属性的设置一一对应
b：通过perspective属性 （作用于元素的后代元素）
perspective: px值; 本身不会有什么效果，只对其后代元素起作用
(5.2)景深基点 （不可继承）
perspective-origin: x-axis y-axis; （该属性只能设置X轴和Y轴上的值，Z轴上的值由perspective属性设置）
作用：控制视角的位置，perspective-origin: left top; 视角位置在元素左上角
x-axis可取值：left、center、right、px值、百分比
y-axis可取值：top、center、bottom、px值、百分比
默认值都是50%，视角位置在元素中心
取值为百分比时，相对于元素自身（包含边框）大小
(6)舞台样式
transform-style: val; （作用于所有的直接子元素，不可继承）
作用：设置直接子元素在空间中如何展示
val可取值：preserve-3d（表示所有直接子元素在3D空间呈现）、flat（表示所有直接子元素在2D平面呈现，也是默认值）
由于不可继承，所以必须为元素所有非叶子后代节点设置该属性
(7)是否显示元素背面
backface-visibility: val;
val可取值有visible（显示）、hidden（不显示，默认值）
该属性需要结合透明背景色使用
六、动画
动画不像过渡那样需要手动触发，动画是自动触发的
animation: name duration timing-function delay iteration-count direction;
animation 属性是一个简写属性，用于设置六个动画属性：
(1)animation-name：设置绑定到选择器的keyframe名称，每个关键帧名称代表一个动画序列
(2)animation-duration：设置完成动画所花费的时间，单位s或ms
(3)animation-timing-function：设置动画的速度曲线，可取值linear（匀速）、ease（先快后慢，默认值）、ease-in（越来越快）、ease-out（越来越慢）、ease-in-out（先快后慢）、steps(n, [start|end])
其中steps(n, [start|end])，n（常常为1）表示将关键帧的每一小节（每一小节由百分比值分隔而来）n等分，当关键帧重复运行时，start表示从关键帧的开头开始执行，end表示从关键帧的结尾开始执行，end是默认值（此处甚是难懂，知道有这回事就行了）
(4)animation-delay：设置动画开始之前的延迟（只在动画开始前延迟一次）
(5)animation-iteration-count：设置连续重复播放关键帧次数，取值为num、infinite（无限循环播放）
(6)animation-direction：设置关键帧的播放方向，可取值normal（正常，从from到to播放）、reverse（反过来，从to到from播放，同时animation-timing-function也会反过来，原来从快到慢，反过来后就是从慢到快）、alternate（from到to到from到to...）、alternate-reverse（to到from到to到from...）
(7)animation-fill-mode：元素在动画外的状态，包括动画开始前的状态、动画停止后的状态，可取值forwards（动画停止后的状态与to保持一致）、backwards（动画开始前的状态与from保持一致）、both（动画开始前的状态与from保持一致，停止后的状态与to保持一致）
(8)animation-play-state：定义动画执行的运行和暂停，可取值paused（停止）、running（运行，默认值）
(9)关键帧
@keyframes move{
0%{
transform: translateY(-200px);
}
25%{
transform: translateY(-90px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(90px);
}
100%{
transform: translateY(200px);
}
}
使用百分比值分隔动画持续时间，from代表的百分比值是0%，to代表的百分比值是100%
注意：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了
标签：style 坐标系 完全 order Fix lex 创建 重复 没有
原文地址：https://www.cnblogs.com/chasesunforever/p/12106005.html
