这是我参与「第五届青训营」伴读笔记创作活动的第10天。

今天在看css知识点的时候发现了一些以前不常用的属性，所以在此做一个总结。

background-clip:

clip是修剪的意思，backgrouun-clip的意思是背景裁剪，他的作用就是设置元素的背景（背景图片或颜色）的填充规则。

常用的有background-clip:text,目前只有谷歌支持，所以通常要用他，就需要使用-webkit-backgrouund-clip:text;

这个属性的意思是：以区块内的文字作文裁剪区域向外裁剪，文字的背景即为区块背景，文字之外的区域将被参见掉

实例：

<span class="gradient-text">practice on BFE.dev, get an offer</span>

 .gradient-text {
    font-size: 30px;
    font-weight: bold;
    background-image: linear-gradient(to right,red,yellow);
    color: transparent;
    background-clip: text;
  }

效果：

caret-color:

caret-color属性可以改变输入框输入光标的颜色，同时又不改变输入框里面的内容的颜色。

input{
    color:#333;
    caret-color:red;
}

效果：

accent-color:

他能修改input默认控件的颜色。。

<input type="range" min="0" max="10">

input{
  accent-color: #F44336;
}

效果：

box-decoration-break:

该属性可以指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现。

box-decoration-break: slice|clone|initial|inherit|unset;

常用的有clone；

slice是默认值。框装饰作为整体应用于元素，并在元素片段的边缘断裂。

clone框架适用于元素的每个片段，就像片段是单个元素一样。边框包裹元素的每个片段的四个边缘，并且完整的重绘每个片段的背景。

实例：

<a class="border">
  BFE.dev is a website to practice Front-End development skills.
</a>

.border {
  line-height: 1.5;
  margin: 5px;
  border:1px solid #7aa4f0;
  padding:0 5px;
  box-decoration-break: clone;
}

效果：