一、圆角
border-top-left-radius: 左上角
border-top-right-radius:右上角
border-bottom-right-radius:右下角
border-bottom-left-radius:左下角
一个值:水平和垂直半径
两个值:水平半径 垂直半径
border-radius
一个值:四个角的水平和垂直半径
两个值:左上右下 右上左下
三个值:左上 右上左下 右下
四个值:左上 右上 右下 左下(从左上角开始顺时针一圈)
八个值:
左上 右上 右下 左下(水平半径)/左上 右上 右下 左下(垂直半径)
单位:px %
椭圆:长方形,圆角写50%
二、盒子阴影
box-shadow:
阴影水平的位置(必须写)
阴影垂直的位置(必须写)
阴影模糊的值(不可以有负值)
阴影的尺寸
阴影的颜色
内外阴影(inset)
写多个阴影的话,中间用逗号隔开
三、文字阴影
text-shadow:
阴影水平的位置(必须写)
阴影垂直的位置(必须写)
阴影模糊的值(不可以有负值)
阴影的颜色
写多个阴影的话,中间用逗号隔开
四、背景尺寸
background-size
两个值:宽度 高度
一个值:这个值是宽度 高度默认是auto
单位:px %
Cover 图片不被拉伸变形,放到或缩小到能完全覆盖住整个盒子,图片的一部分可能看不见.
Contain图片不被拉伸变形,整个图片都可以看见,放大缩小到宽度或者高度能有一个是和盒子相同的,另一方向是auto,可能盒子的一部分是没有背景图片的
五、多背景
多个背景中间用逗号隔开,先后顺序决定层级
六、背景的定位区域
background-origin
border-box 边框区域
padding-box 内边距区域
content-box 内容区域(width和height)
七、背景的剪裁
background-clip
border-box 边框区域
padding-box 内边距区域
content-box 内容区域(width和height)
八、线性渐变
background: linear-gradient(red,blue);
红色和蓝色渐变
background: linear-gradient(to right,red,blue)
左侧是红色,右侧是蓝色
linear-gradient(to top right,red,blue)
左下角是红色,右上角是蓝色
linear-gradient(60deg,red,blue)
deg表示角度
linear-gradient(red 50px,blue 100px)
从0到50是纯红色
50到100 红色和蓝色渐变
100以后是纯蓝色
repeating-linear-gradient(red 50px,blue 100px);
重复的线性渐变
颜色的值:英文单词,十六进制,rgb,rgba
九、径向渐变
background: radial-gradient(red,blue)
红色和蓝色径向渐变,中间是红色,外面是蓝色
radial-gradient(red 50px,blue 100px)
从中心到方圆50px是纯红色,50px到100px 是红蓝渐变,100px以外是纯蓝色
repeating-radial-gradient(red 50px,blue 100px)
重复的径向渐变
radial-gradient(at left top,red 50px,blue 100px)
圆心在左上角
at left top
at right top
at right bottom
at center top
…
At 100px 200px(圆心在距左100px,距上200px的位置)
radial-gradient(circle at 100px 100px,red 50px,blue 100px)
circle表示是一个正圆
十、如何计算一个元素的总宽度和总高度
box-sizing:
border-box; 怪异盒模型
content-box 标准盒模型
十一、用户调整元素尺寸
resize: horizontal;改变宽度
resize: vertical;改变高度
resize: both;宽高都改变
必须配合overflow: auto/scroll/hidden;使用
resize: none;
十二、多栏布局
column-width: 200px; 栏目的宽度
column-count: 4; 栏目数量
column-gap: 100px; 栏目与栏目之间的间隙
column-rule: 10px solid #000;栏目与栏目之间的分割线
column-span:横跨栏目数量
all 1
十三、允许长单词换行Word-wrap
word-wrap: break-word;
先换一行,一行放不下了再换行
十四、自动换行的处理方法word-break
word-break: break-all;
把单词完全打破,同一行能放下多少就放多少,下一行放不下还能再换行
十五、设置如何处理元素内的空白
white-space
十六 一行文字变点状
需要三个属性配合使用
单行文本
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;文字超出的部分变点状
多行文本
.box1{
width: 200px;
background-color: yellow;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp:3; /* 显示3行 */
display: -webkit-box; /* 必须要结合的属性,让元素显示为弹性盒 */
-webkit-box-orient: vertical; /* 必须结合的属性,子元素的排列方式:垂直 */
}
还有一种隐藏法兼容性较比强
.box2{
width: 200px;
line-height: 30px;
height: 90px;
background-color: red;
overflow: hidden;
position: relative;
}
.box2:after{
content: '...';
position: absolute;
right: 0;
bottom: 0;
width: 40px;
text-align: right;
background:linear-gradient(to right,transparent,red);
}
网友评论