文本换行:
word-wrap:normal(只在允许的断字点换行)/
break-word(允许长单词或URL地址换行到下一行)
word-break:break-all(在单词内直接换行)/
keep-all (文本不会换行,只在半角空格或连字符处换行)
背景属性:
background-origin:背景原点(背景显示的原位置)
属性值:
- padding-box 背景图像填充框的相对位置 默认值;
- border-box 背景图像边界框的相对位置;
- content-box 背景图像的相对位置的内容框;
background-clip:背景裁切
属性值:
- border-box 背景被裁剪到边框盒, 默认值;
- padding-box 背景被裁剪到内边距框;
- content-box 背景被裁剪到内容框;
background-size:背景尺寸
属性值:
- length 规定背景图的大小,第一个值宽度 第二个值高度;
- percentage 以百分比为值设置背景图大小;
- cover 把背景图像扩展到足够大,以使其完全覆盖背景区域;
- contain 把背景图像扩展至最大尺寸,以使其宽度或高度完全适应内容区域;
图片边框:
border-image 该属性是简写,展开写是如下属性:
- border-image-source 路径;
- border-image-slice 图片边框向内偏移(不加单位);
- border-image-repeat 平铺repeat、铺满round 、拉伸stretch;
- border-image-outset 边框图像区域超出边框的量(值是个倍数);
CSS圆角:
border-radius:左上 右上 右下 左下;
border-radius:10px/20px(水平半径/垂直半径);
border-radius:10px 20px 30px 40px /40px 30px 20px 10px(水平半径/垂直半径);
线性渐变:
background:linear-gradient(direction方向,渐变的颜色1,渐变的颜色2........)
方向:to left / right /top / bottom 默认;
to right bottom / to right top / to left bottom / to left top;
使用角度渐变:linear-gradient(10deg,red,blue)
径向渐变:
background:radial-gradient(center,shape,size,start-color,.......last-color);
center:渐变起点的位置,第一个值表示水平,第二个值表示垂直,
可为百分比,默认是图形的正中心;
shape:形状,ellipse椭圆(默认) 、 circle 圆形 ;
若元素为正方形,则两种属性值表现出来的形状一样
size:渐变大小,即渐变到哪里停止;closest-side最近边,farthest-side最远边,closest-corner最近角,farthest-corner最远角