CSS属性笔记

text-shadow 属性

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

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

display 属性

更多信息 参考页面 

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现(块级或内联元素);元素的内部显示类型 inner display types 可以控制其子元素的布局(例如:flow layoutgrid 或 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>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.