css笔记

一、中文、英文字符、数字等换行写法区别

// 中文字符
.div {
  white-space: normal;
}

// 英文或者数字
.div {
  white-space: normal;
  word-break: break-all;
}
// 备注：设置white-space: normal;的时候，浏览器对于英文和数字不会自动换行

 二、整个页面置灰

html {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

　　

三、绘制三角箭头

div {
  display: inline-block;
   border-top: 2px solid;
   border-right: 2px solid;
   width: 20px;
   height: 20px;
   transform: rotate(45deg); 
}

四：绘制三角形

 .triangle {
    display:inline-block;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
 }