CSS——7个好用的CSS属性

1、background-clip

backgroundclip CSS属性设置元素的背景是否扩展到其border 、padding 或content 框之下。

此属性采用以下值之一：border-box (default) | padding-box | content-box | text
主要说明一下属性值是：text的时候。当属性时text的时候，以区块的文字作为裁剪区域，即文字的背景是裁剪图片的背景。以下为属性值效果：

p {
     font-size: 100px;
     font-weight: 600;
     -webkit-background-clip: text;
     color: transparent;
     background-image: url('./img/aql.jpeg');
     background-size: 10% 10%;
 }

特别注意的是当属性值取text的时候，只有在火狐浏览器上有效，因此要在属性名前添加：-webkit-.

2、user-select

每当我们有不想让用户选择的文本，或者相反，如果发生了双击或上下文单击，希望选择所有文本时，user-select属性将非常有用。

此属性采用以下值之一：none | auto | text | all

none：元素及其子元素的文本不可选中。请注意这个Selection 对象可以包含这些元素。从Firefox 21开始， none 表现的像
-moz-none，因此可以使用 -moz-user-select: text 在子元素上重新启用选择。

auto
auto 的具体取值取决于一系列条件，具体如下：

• 在 ::before 和 ::after 伪元素上，采用的属性值是 none
• 如果元素是可编辑元素，则采用的属性值是 contain
• 否则，如果此元素的父元素的 user-select 采用的属性值为 all，则该元素采用的属性值也为 all
• 否则，如果此元素的父元素的 user-select 采用的属性值为none，则该元素采用的属性值也为 none
• 否则，采用的属性值为text
• text：用户可以选择文本。
• all：在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。