CSS属性笔记

text-shadow 属性

它可以为元素中的文本提供阴影。四个值含义如下：

• 第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
• 第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
• 第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
• 第四个值设置阴影的基色。

display 属性

更多信息 参考页面 

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

display 属性使用关键字取值来指定，关键字取值被分为六类：

.container {
  display:  [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
}

calc()函数

这个函数使您能够在CSS中进行简单的计算。如果您希望计算出在为项目编写CSS时无法定义的值，并且需要浏览器在运行时为您计算出这些值，那么它特别有用。

例如，下面我们使用calc()使框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的20%是多少，所以我们使用calc()来告诉浏览器为我们做这个计算。

.wrapper {
  width: 400px;
}
.box {
  width: calc(20% + 100px);
}

<div class="wrapper">
  <div class="box">My width is calculated.</div>
</div>