记录css的一些不常用属性，特殊场景下很有用

**********请注意属性兼容性*********

CSS box-sizing 属性

.box-sizing{

　　box-sizing: border-box; /*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，不增加额外的宽高*/

　　box-sizing: content-box; /*在宽度和高度之外绘制元素的内边距和边框*/

}

CSS @import 属性

@import "navigation.css"; /* 使用字符串 */

@import url("navigation.css"); /* 使用 url */

CSS @charset 规则

@charset "UTF-8";

CSS caret-color 属性

设置 input 元素中光标的颜色：

input { 
  caret-color: red;
}

CSS backface-visibility 属性

隐藏被旋转的 div 元素的背面：

div{
  backface-visibility:hidden;
}

CSS background-attachment 属性

/*固定背景*/

body 
  { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed;
  }

CSS background-clip 属性

/*相对于内容框填充区域*/

div
{
background-color:yellow;
background-clip:content-box;
}

CSS background-origin 属性

/*相对于内容框来定位背景图像*/

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

CSS break-after 属性

@media print {
  footer {
    break-after: always;
  }
}
始终在某个区域中的 <ul> 元素之后插入分区符

.region ul {
    break-after: region;
  }
}

CSS clip 属性

剪裁图像

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

CSS pointer-events 属性

设置元素是否对指针事件做出反应

div.ex1 {
  pointer-events: none; /*元素不对事件做出反应*/
}

CSS scroll-behavior 属性

为文档添加平滑滚动效果

html {
  scroll-behavior: smooth;
}

CSS resize 属性

规定可以由用户调整 div 元素的大小：

div
{
resize:both;
overflow:auto;
}

CSS object-fit | object-position属性

裁剪图像的两边，保留长宽比，然后填充空间：

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

CSS mix-blend-mode 属性

拥有红色背景的容器，以及与这个红色容器融合的图像（暗）：

.container {
  background-color: red;
}

.container img {
  mix-blend-mode: darken;
}

CSS content 属性

下面的例子在每个链接后插入括号中的 URL：

a:after
  {
  content: " (" attr(href) ")";
  }

CSS clip-path 属性

把图像裁剪为 50% 的圆：

img {
  clip-path: circle(50%);
}

CSS 函数

attr()

calc()

var()

cubic-bezier()