1。透明度
rgba和不透明度都可以设置为透明。
RGBA(红、绿、蓝、阿尔法):阿尔法是0-1透明度，颜色为0时完全透明，1时完全不透明。
Opacity:index:index: index为0-1，设置整个元素的透明度。
两者的区别:rgba用透明度设置元素的字体或背景色，其他样式不受影响。当不透明度影响整个元素(包括其子元素)时，它会设置透明度。
2，圆角
边框半径:为元素添加圆形边框。边框半径可以缩写或单独设置。与边距设置类似，可以设置一个值(代表四个圆角)，两个值(第一个是左上角，第二个是右上角和左下角)，三个值(第一个值是左上角，第二个值是右上角和左下角，第三个值是右下角)。
border-radius: 10px;/* 等价于 */border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;
3。背景图片
新的背景图片设置可以缩写或单独设置。新属性和含义:
background-i***ge /*设置背景图路径(相对和绝对路径)*/background-repeat /*背景图是否重复，repeat-x水平方向重复；repeat-y垂直方向重复；no-repeat不重复；默认情况下两个方向都重复*/background-position /*背景图对齐方式，默认是左上角;(100% 0)right top设置到右上角；(100% 100%)right bottom设置到右下角；(0 100%)left bottom设置到左下角；0 0（left top）设置到左上角；center center 水平和垂直方向都居中 */background-attachment /*背景图是固定还是滚动。fixed固定背景图；scroll跟随页面滚动*/background-size 背景图片的尺寸。backgroun-origin 规定background-position属性相对于什么位置来定位。background-clip 规定背景的绘制区域。
4。阴影
Box-shadow:为元素添加阴影。
语法:box-shadow:水平偏移量垂直偏移量[模糊半径阴影大小阴影颜色插入(内部阴影)]
文本-阴影:阴影文本。
语法:text-shadow:水平偏移量垂直偏移量[模糊半径阴影大小阴影颜色插入(内部阴影)]
5。渐变
渐变有两种:线性渐变和径向渐变。
线性渐变:从某个方向或角度定义渐变。
线性渐变语法(使用方向):背景-图像:线性渐变(方向，色停1，色停2，…);
未设置方向时，默认情况下是从上到下。可以设置的方向属性值有:下、上、右、左和右下。
线性渐变语法(使用角度):背景-图像:线性渐变(角度，色停1，色停2，…);
角度角度通过在数字上加上deg来设置。
径向渐变:定义从中心开始的渐变。
径向梯度语法:背景图像:径向梯度(形状大小的位置，开始颜色，…last-color)；
6。转换
css3的变换可以拉伸、缩放、旋转和移动元素。转换可以分为2D转换和三维转换。
2D转换包括缩放(scale)、旋转(rotate)、平移(move)、倾斜(沿x或y轴旋转)和矩阵缩写。
translate(x,y)：指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。translateX(n)：指定元素在X轴中的位移。translateY(n)：指定元素在Y轴中的位移。scaleX(n)：定义 X 轴方向的缩放转换。scaleY(n)：定义 Y 轴方向的缩放转换skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换。skewX(angle)：定义沿着 X 轴的 2D 倾斜转换。skewY(angle)：定义沿着 Y 轴的 2D 倾斜转换。
矩阵方法有六个参数，包括旋转、缩放、移动(平移)和倾斜函数。
实例: 利用***trix()方法旋转div元素30°transform : ***trix( 0.866 , 0.5,-0.5,0.866,0,0);-ms-transform:***trix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-webkit-transform:***trix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */3D转换
3D转换
translated3d(x,y,z):指定元素在三维空间的位移。translatedX(x) ：指定元素在x轴中的位移。translatedY(y) ：指定元素在y轴中的位移。translatedZ(z) ：指定元素在z轴中的位移。scale3d(x,y,z)：定义 3D 缩放转换。scaleX(x)：通过设置 X 轴的值来定义缩放转换。scaleY(y)：通过设置 Y 轴的值来定义缩放转换。scaleZ(z)：通过设置 Z 轴的值来定义缩放转换。rotate3d(x,y,z,angle)：定义 3D 旋转。rotateX(x)：定义沿着 X 轴的 3D 旋转。rotateY(y)：定义沿着 Y 轴的 3D 旋转。rotateZ(z)：定义沿着 Z 轴的 3D 旋转。
7。过渡
过渡:设置要过渡的元素的效果。共有四个属性，可以缩写。
transition-property：规定应用过渡的 CSS 属性的名称。transition-duration：定义过渡效果花费的时间。默认是 0。transition-timing-function ：规定过渡效果的时间曲线。默认是 “ease”。transition-delay：规定过渡效果何时开始。默认是 0。
它可以缩写为:
过渡:属性持续时间计时-功能延迟；
8。动画
Ani***te:向元素添加动画，这是一个简写属性。您也可以拆分设置。
ani***tion-name：规定动画名称ani***tion-duration：规定一个动画周期所花费的时长ms或s为单位。ani***tion-timing-function：规定动画的速度曲线。ani***tion-fill-mode：规定动画不播放时的元素样式。ani***tion-delay：规定动画延迟多久执行。ani***tion-iteration-count：动画播放次数。ani***tion-direction：规定动画下一期是否逆向播放。ani***tion-paly-state：动画运行状态。
它可以缩写为:
动画:名称持续时间计时-函数延迟迭代-计数播放-状态；
9。文本效果
分词:定义如何换行。属性值有nor***l(浏览器默认换行规则)、break-all(允许字内换行)和keep-all(只在半角空或连字符处换行)。
自动换行:允许长内容自动换行。有正常的断字属性值。
Text-overflow:指定文本溢出包含它的元素，以及应该发生什么。属性值是clip(修剪的文本)、ellipsis(省略号)和string(给定的字符串表示修剪的文本)。
本文来自手牵手我们一起走过投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/636383.html
微信扫一扫 
