1、透明度
rgba和opacity都可以设置透明的。
rgba(red, green, blue, alpha):alpha是0-1透明度,0时颜色为完全透明,1是完全不透明。
opacity:index:index是0-1,设置整个元素的透明度。
两者区别:rgba是设置元素的字体或背景颜色加了透明度,其他样式不受影响,opacity是影响整个元素包含其子元素都会设置透明度。
2、圆角
border-radius:为元素添加圆角边框,border-radius可以简写也可以分别设置。与margin设置类似,可以设置一个值(表示四个圆角)、两个值(第一个是左上角右下角,第二个值是右上角左下角)、三个值(第一个值是左上角,第二个值是右上角和左下角,第三个值是右下角)。
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-image background-repeat background-position background-attachment background-size 背景图片的尺寸。 backgroun-origin 规定background-position属性相对于什么位置来定位。 background-clip 规定背景的绘制区域。4、阴影
box-shadow:给元素添加阴影。
语法:box-shadow:水平偏移 垂直偏移 [ 模糊半径 阴影尺寸 阴影颜色 inset(内部阴影) ]
text-shadow:给文字加阴影。
语法:text-shadow:水平偏移 垂直偏移 [ 模糊半径 阴影尺寸 阴影颜色 inset(内部阴影) ]
5、渐变
渐变有两种:线性渐变和径向渐变。
线性渐变:从某个方向或角度开始定义渐变
线性渐变语法(使用方向):background-image: linear-gradient(direction, color-stop1, color-stop2, …);
direction不设置的时候默认从上到下,可以设置的方向属性值有to bottom、to top、to right、to left、to bottom right。
线性渐变语法(使用角度):background-image: linear-gradient(angle, color-stop1, color-stop2, …);
angle角度设置时 数字加deg。
径向渐变:从中心开始定义渐变
径向渐变语法:background-image: radial-gradient(shape size at position, start-color, …, last-color);
6、转换
css3的转换可以对元素进行伸缩、缩放、旋转、移动等。转换可分为2D转换和3D转换。
2D转换有scale(缩放)、rotate(旋转)、translate(移动)、skew(沿x或y轴旋转)、matrix简写各种2D转换。
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 倾斜转换。matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
实例: 利用matrix()方法旋转div元素30°transform : matrix( 0.866 , 0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); 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 :设置元素要过渡的效果,总共有四个属性,可简写。
transition-property:规定应用过渡的 CSS 属性的名称。 transition-duration:定义过渡效果花费的时间。默认是 0。 transition-timing-function :规定过渡效果的时间曲线。默认是 “ease”。 transition-delay:规定过渡效果何时开始。默认是 0。可简写为:
transition: property duration timing-function delay;
8、动画
animate:为元素添加动画,是一个简写属性。也可以拆分设置。
animation-name:规定动画名称 animation-duration:规定一个动画周期所花费的时长ms或s为单位。 animation-timing-function:规定动画的速度曲线。 animation-fill-mode:规定动画不播放时的元素样式。 animation-delay:规定动画延迟多久执行。 animation-iteration-count:动画播放次数。 animation-direction:规定动画下一期是否逆向播放。 animation-paly-state:动画运行状态。可简写为:
animation: name duration timing-function delay iteration-count paly-state;
9、文本效果
word-break:定义如何换行。属性值有normal(浏览器默认换行规则)、break-all(允许在单词内换行)、keep-all(只能在半角空格或连字符处换行)。
word-wrap:允许长的内容可以自动换行。属性值有normal,break-word。
text-overflow :指定文本溢出包含他的元素,应该发生什么。属性值有clip(修剪文本)、ellipsis(显示省略号)、string(给定的字符串来代表被修剪的文本)。
查看更多关于【运动健身】的文章