CSS3边框
三个标签:border-radius,box-shadow,border-image;border-radius可以设置圆角,可分别为左上,右上,左下,右下单独设置圆角。box-shadow设置阴影,水平阴影,垂直,模糊度,颜色,使用特例:
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
设置卡片效果
。border-image设置图片边框,边框大小以及图片填充方式 repeat,round,stretch。
背景
background-image 设置背景图片,可以设置多张,第一张在最上层显示
background-size 背景图片大小
background-orgin content-box,padding-box,border-box,背景图片放置的位置
background-clip 背景的绘制区域
颜色渐变属性
linear-gradient 线性渐变,可指定方向,默认从上到下,需设置初始颜色与结束颜色,使用rgb可以设置透明度
radial-gradient 径向渐变,由圆心向外渐变,默认为椭圆ellipse
文本效果
text-shadow 文字阴影
text-overflow 文字超出部分处理 ,clip直接裁剪,ellipsis 超出部分加上省略号
换行: word-wrap:normal 等同于 word-break:keep-all,支持换行,但是不支持长单词拆分换行,word-wrap:break-word,保留noraml遇到断字点如标点,空格等情况下换行的规则,并会对超出长度的长单词或url等截断换行,而word-break:break-all 则不采用断字点换行规则,只根据长途,达到对应长度自动换行
字体:@font-face font-family:自定义名字 src:字体引用文件 font-weight:字体粗细
2D/3D转换
transform(2D): 平移:translate(x,y) 从当前位置在x轴 y轴平移大小
旋转:rotate(deg)角度旋转
放缩:scale(宽倍数,高倍数)宽高放缩一定倍数
倾斜:skew(20deg,30deg)x倾斜20deg,y轴倾斜30deg
matrix(),六个参数,包括平移,旋转,放缩,倾斜四种效果
transform(3D): tranlate3d(x,y,z),rotate3d(x,y,z,angle) scale(x,y,z)3D转换,matrix()内使用16个值,4x4矩阵
transform-orgin:可修改被转换的元素位置
动画:
transition:设置过度效果,属性名➕时间 + 时间曲线+开始时间(后两个默认ease,0,为可选)
transition-property duration timing-function delay
@keyframes 创建关键动画
需要设置初始 与 结束 的style from to 或者 0% 100%,使用百分可以设置多重效果
animation-name duration timing-function delay iteration-count 播放次数 direction 下一次是否逆向 play-state 是否运行或者暂停动画
column:
column-count 分割列数 colum-gap 列之间的间隙 column-rule-style:solid 列边框样式 colum-rule-width 列边框宽度 colum-rule-color 颜色 column-rule三项简写
box-sizing:border-box 设定后,设置的宽度或者高度,是包括pading 和border ,不仅仅指盒子content
resizing:both 用户可调整宽高 horizontal 可调整宽度 vertical 可调整高度
弹性盒子
display:flex/inline-flex
flex-direction 设置主轴方向 row 横向 row-reverse 横 反向 column 竖直方向 cloumn-reverse反向
justify-content(主轴): flex-start flex-end center space-between两端对齐 space-around 分散对齐
align-items(次轴): flex-start flex-end center baseline与基线对齐 stretch是否拉伸
flex-wrap:wrap 换行
align-content:定义行的对齐方式,与单个item无关 flex-start flex-end center space-between两端对齐 space-around 分散对齐
order:可设置负数,根据内容,对item进行排序,最小排最前面
auto:设置剩余空间位置 margin:auto 剩余空间放在item四周,item剧中,margin-right:auto 剩余空间放在item右边,item靠左显示
flex:自动计算item所占用空间
align-self:设置单个item的对齐方式