CSS3边框
/* 圆角 */
border-radius: 10px;
/*
盒阴影,语法:box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必需的。水平阴影的位置。允许负值
v-shadow:必需的。垂直阴影的位置。允许负值
blur:可选。模糊距离
spread:可选。阴影的大小
color:可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset:可选。从外层的阴影(开始时)改变阴影内侧阴影
*/
box-shadow: 10px -10px 20px green;
CSS3渐变
/* 多颜色渐变,逗号拼接颜色 */
/* 从上到下(默认情况) */
background-image: linear-gradient(red, blue);
/* 从左到右 */
background-image: linear-gradient(to right, red, blue);
/* 对角 */
background-image: linear-gradient(to bottom right, red, blue);
CSS3文本效果
文本阴影,和box-shadow用法相似
text-shadow: 10px -10px 20px green;
文本溢出
/* 超过1行省略/裁剪 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis|clip;
文本换行
/*
normal:只在允许的断字点换行(浏览器保持默认处理)。
break-word:在长单词或 URL 地址内部进行换行。
*/
word-wrap: break-word;
/*
normal:使用浏览器默认的换行规则。
break-all:允许在单词内换行。
keep-all:只能在半角空格或连字符处换行。
*/
word-break: break-all;
CSS3网格布局
应用场景:flex、float布局应用于一维布局,网格布局应用于二维布局
display: grid;
grid-template-columns: repeat(3, 110px);
grid-template-rows: repeat(2, 110px);