【前端开发】CSS应用视觉设计属性介绍

text-align

web 内容大部分都是文本。 CSS 里面的 text-align 属性可以控制文本的对齐方式。

text-align: justify; 将文本隔开，使每行的宽度相等。

text-align: center; 可以让文本居中对齐。

text-align: right; 可以让文本右对齐。

text-align: left; 是默认值，它可以让文本左对齐。

box-shadow

box-shadow 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。

box-shadow 属性按顺序采用以下值：

offset-x （阴影的水平偏移量），
offset-y （阴影的垂直偏移量），
blur-radius
spread-radius
color
其中 blur-radius 和 spread-radius 是可选的。

可以通过逗号分隔每个 box-shadow 元素的属性来添加多个 box-shadow。

如下为添加了模糊效果的例子，它使用了透明度较高的黑色作为阴影：

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

opacity

CSS 里的 opacity 属性用来设置元素的透明度。

属性值为 1 代表完全不透明。
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。

透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

text-transform

CSS 里的 text-transform 属性可以改变英文字母的大小写。 使用这个属性时，我们无需改变 HTML 元素中的文本也可以统一页面里英文的显示。

下面的表格展示了 text-transform 的不同值对文字 “Transform me” 的影响：

值	结果
lowercase	“transform me”
uppercase	“TRANSFORM ME”
capitalize	“Transform Me”
initial	使用默认值
inherit	使用父元素的 text-transform 值。
none	Default:不改变文字。