共计 3192 个字符，预计需要花费 8 分钟才能阅读完成。
CSS3 简介
CSS 的设计次要是为了实现文档内容与文档示意的拆散，包含布局、色彩和字体等方面。它还能够用于以不同的形式显示 web 页面，能够依据您的屏幕大小进行更改。对文档设计的更改能够疾速、轻松地利用。
什么是 CSS?
层叠样式表（CSS）是一种向 Web 文档增加款式（例如，字体，色彩，间距）的简略机制。
什么是 CSS3?
CSS3 是 CSS 语言的最新倒退，旨在扩大 CSS2.1。它带来了许多新性能和附加性能，如圆角，暗影，突变，过渡或动画，以及多列，灵便的框或网格布局等新布局。
边框(Border)
该 border-radius 属性可用于创立圆角。此属性通常定义外边界边缘的角的形态。在 CSS3 之前，切片图像用于创立相当麻烦的圆角。
.box {
width: 300px;
height: 150px;
background: #cff;
border: 2px solid #fcc;
border-radius: 20px;
} <div class="box"></div>色彩(Color)
CSS3 减少了对作为元素设置色彩值的一些新的性能的符号 rgba()，hsl() 和hsla()。
rgba 色彩的值
能够应用 rgba() 性能符号在 RGBA 模型（红色 – 绿色 – 蓝色–alpha）中定义色彩。RGBA 色彩模型是具备 alpha 通道的 RGB 色彩模型的扩大，用于指定色彩的不透明度。
alpha参数承受从 0.0（齐全通明）到 1.0（齐全不通明）的值。
h1 {color: rgba(0,0,255,0.5);
}
p {background-color: rgba(0%,0%,100%,0.3);
} <h1> 这是一个题目 </h1>
<p> 这是一个段落 </p>hsl 色彩的值
色彩也能够应用 hsl()性能符号定义为 HSL 模型（色相 – 饱和度 – 亮度）。色相示意为色轮或圆形（即以圆形示意的彩虹）的角度（从 0 到 360）。该角度以较少的单位数给出，因为该角度通常以度为单位进行度量，以至该单位隐含在 CSS 中
饱和度和亮度以百分比示意。100% 饱和度示意全彩，并且 0% 是灰色暗影。然而，100% 亮度为红色，0% 亮度是彩色，50% 亮度是失常的
h1 {color: hsl(360,70%,60%);
}
p {background-color: hsl(480,50%,80%);
} <h1> 这是一个题目 </h1>
<p> 这是一个段落 </p>hsla 色彩值
能够应用 hsla()性能符号在 HSLA 模型（色调饱和度 – 亮度–alpha）中定义色彩。HSLA 色彩模型是具备 Alpha 通道的 HSL 色彩模型的扩大，该 Alpha 通道指定了色彩的不透明度。
alpha参数承受从 0.0（齐全通明）到 1.0（齐全不通明）的值。
h1 {color: hsla(360,80%,50%,0.5);
}
p {background-color: hsla(480,60%,30%,0.3);
} <h1> 这是一个题目 </h1>
<p> 这是一个段落 </p>背景(background)
background-size 属性
该 background-size 属性可用于指定背景图像的大小。在 CSS3 之前，背景图片的大小由图片的理论大小决定。背景图像的大小能够应用像素或百分比值，以及关键字来指定 auto，contain 和cover。不容许应用负值。
.box {
width: 250px;
height: 150px;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
border: 6px solid #333;
} <div class="box"></div>留神：背景图片的原始大小为 500×300 像素，然而应用 background-size CSS 属性，咱们依然能够在较小的框中显示残缺的图片
background-clip 属性
background-clip属性可用于指定元素的背景是否延长到边框中。该 background-clip 属性能够取三个值：border-box，padding-box，content-box。
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: orange;
background-clip: content-box;
} <div class="box"></div>background-origin 属性
该background-origin` 属性可用于指定背景图像的定位区域。它能够采取雷同的值 background-clip 属性：border-box，padding-box，content-box。
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
background-origin: content-box;
} <div class="box"></div>线性突变(linear)
.box {
width: 250px;
height: 150px;
background: linear-gradient(to right ,#fcc , #cff);
}如果要进一步指定突变的方向，能够设置角度，而不是预约义的关键字。该角度 0deg 创立了从底部到顶部的突变，正角度示意顺时针旋转，这意味着该角度 90deg 创立了从左到右的突变
.box {
width: 250px;
height: 150px;
background: linear-gradient(90deg ,#fcc , #cff);
} <div class="box"></div>文本溢出(text-overflow)
例如，如果将空白元素的 white-space 属性值设置为 nowrap，或者单个单词太长而无奈包容较长的电子邮件地址，则可能会导致文本溢出（例如，将其禁止换行）。在这种状况下，能够应用 CSS3 text-overflow 属性来确定溢出文本内容的显示方式。ellipsis渲染省略号（“…”）以示意剪切后的文本 clip 将文本剪切到内容区域的限度处
p {
width: 200px;
overflow: hidden;
white-space: nowrap;
background: #cff;
text-overflow: ellipsis;
} <p> 文本超出后用... 示意文本超出后用... 示意文本超出后用... 示意文本超出后用... 示意 </p>暗影(shadow)
box-shadow 属性
box-shadow 属性可用于向元素的框中增加暗影。您甚至能够应用逗号分隔的暗影列表利用多个暗影成果。
box-shadow: offset-x offset-y blur-radius color;该 box-shadow 属性的组件具备以下含意：
- offset-x —设置暗影的程度偏移量。
- offset-y —设置暗影的垂直偏移
- blur-radius —设置含糊半径。值越大，含糊越大，暗影的边缘越含糊。不容许应用负值
- olor —设置暗影的色彩。如果省略或未指定色彩值，则它将采纳 color 属性的值。
.box {
width: 200px;
height: 150px;
background: #ccc;
box-shadow: 5px 5px 10px #999;
}text-shadow 属性
您能够应用 text-shadow 属性在文本上利用暗影成果。您还能够应用与 box-shadow 雷同的表示法对文本利用多个暗影。
h1 {text-shadow: 5px 5px 10px #666;}
h2 {text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;}
