边框;border-radius/image
border-radius:左上 右上 右下 左下; 圆角
border-radius:左上 右上左下 右下
border-radius:左上右下 右上左下
box-shadow: X轴偏移 y轴偏移 阴影大小 颜色;边框阴影
box-shadow: X轴偏移 y轴偏移 颜色;
border-image设置边框图片
背景;background
background-image: url(image/2.png),url(image/1.png)设置多张背景图片;
background-size:contain指的是一个100%,cover设置2个百分百不会变形;
background-origin指定背景图片的位置区域
border-box边框区域
content-box内容区域
padding-box内边框区域
background-clip裁剪指定区域
渐变;线性渐变与径向渐变
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
background-image: linear-gradient(pink,#000);
to 。。。所需要渐变的方向
默认情况从上往下渐变
background-image: linear-gradient(to left,pink,#000);
从右到左
background-image: linear-gradient(to right,pink,#000);
从左到右
background-image: linear-gradient(to left top,pink,#000);
从右下到左上
background-image: linear-gradient(30deg,orange,#000);
设置任意的角度,角度单位为deg,可以设置负值
径向渐变(Radial Gradients)- 由它们的中心定义
background-image: radial-gradient(orange,#000);
默认值,由中心向外径向渐变
background-image: radial-gradient(orange 40px,#000 95%);
设置径向的颜色占比
ellipse椭圆
circle 圆形
文本
text-shadow文字阴影
box-shadow盒子阴影
text-overflow文本溢出显示的内容
clip不显示省略文本,默认值
ellipsis显示省略文本
word-wrap文本换行
word-break
word-break: break-all;使英文字母换行
word-break: keep-all;使空格和连字符换行
设置单行省略号 ;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
设置多行省略号 ;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-wrap: break-word;
2D转换
transform属性
transform: translate(20px,50px)在浏览器中X轴和Y轴上的距离
两个值之间用逗号隔开
translate移动
transform: rotate(30deg);可以设置元素旋转,正值沿顺时针旋转,负值则相反
旋转角度单位是deg,不能使用px
rotate旋转
transform: scale(1,2);设置元素缩放,缩放打下由X和Y值决定缩放的比例
如果为负值呈现相反对立方向缩放
scale缩放
transform: skew(20deg,30deg);设置元素在X轴和Y轴上倾斜,正值为顺时针,负值则相反
设置一个值时,代表X轴倾斜,Y轴默认为0
skew倾斜
transform: matrix(1,2,-2,1,0,0);
X缩放,Y轴倾斜,X轴倾斜,Y轴缩放,X轴平移,Y轴平移
matrix 2D所有属性值缩写形式
transform-origin更改旋转的中心点
可以设置上下左右,center,px,%
transform-origin: left top;-->
<!-- transform-style: preserve-3d;设置元素呈现3D效果
perspective透视,值越小,元素越大(越近)
perspective-origin设置透视中心点的位置区域
backface-visibility: visible;背对元素是否可见,默认是可见状态,如需要设置不可见,设置值为hidde
注:设置单独X轴或Y轴时,不能一起使用,否则会导致最后一个轴有效果, 如果既要设置X又要设置Y请使用列如rotate
过渡
transition:css属性名称 时间(s,ms 1s=1000ms) 曲线运动 规定 开始 运动时间
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
linear 规定以相同速度开始至结束的过渡效果
动画
第一步创建动画
需要绑定一个css名称
from...to开始到结束的动画
from...to指的是0%...100%
@keyframes创建动画
简写;animation: name duration timing-function
delay iteration-count
direction fill-mode play-state
animation-name: name;设置动画名称
animation-duration: 2s;设置动画运动的时间
animation-timing-function: ease;设置动画的运动曲线
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
linear 规定以相同速度开始至结束的过渡效果
animation-fill-mode: forwards;设置运动后所停留的位置
none默认值
forwards最后一帧动画暂停位置
backwards第一帧动画暂停位置
both当前执行完动画后所停留的位置
animation-delay: 2s;动画几秒后开始运动
animation-iteration-count: 2;设置动画执行的次数
infinite无限次
animation-direction: normal;设置循环或反向执行动画
normal默认值正常执行动画
reverse反向执行动画
alternate设置动画奇数次正向执行动画,偶数次反向执行动画
alternate-reverse设置动画偶数次正向执行动画,奇数次反向执行动画
animation-play-state: paused;设置动画是否执行动画或暂停动画
注:可以实现轮播(原理)暂停和播放的功能
paused暂停动画
running执行动画
视频;video
autoplay加载完成后自动播放
controls显示播放进度条和按钮
设置width宽度height高度可以添加单位,也可不加
loop循环播放
muted设置视频的音频静音
poster设置视频未播放时第一张显示界面
preload视频加载时就会开始播放,如果出现autoplay,就会忽略preload
<video src="./image/movie.mp4" width="300" height="200" poster="./image/1.png" controls muted>
</video>
音频;audio
autoplay加载完成后自动播放
controls显示播放进度条和按钮
设置width宽度height高度可以添加单位,也可不加
loop循环播放
muted设置视频的音频静音
<audio src="horse.mp3" >
<source src="horse.mp3" type="audio/mp3">
</audio>
inpue属性
text文本
<input type="text">
password密码
<input type="password">
button按钮
<input type="button" value="按钮">
number数字
<input type="number">
color颜色
<input type="color">
submit提交
<input type="submit">
date日期
<input type="date">
datetime日期时间 只兼容苹果和opera
<input type="datetime">
datetime-local日期时间 兼容谷歌
<input type="datetime-local">
email邮箱
<input type="email">
month日期---月
<input type="month">
disabled禁止状态
<input type="button" disabled value="按钮">
<!-- max最大输入值为XX,搭配number类型使用
min最小值为XX
<input type="number" max="10" min="5">
maxlength最大输入长度为XX
minlength最小输入长度为XX-
<input type="text" maxlength="10" minlength="5">
pattern设置正则表达式
pattern="[A-Za-z]{3}"验证只能输入大写与小写的a-z,
并且只能输入3个
action接口地址,验证输入
readonly只读模式
required设置必填项
size设置input框大小,默认大小为20
step设置number类型数字间隔为XX,默认为1
value可以设置值为XX