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>

留神：背景图片的原始大小为500x300像素，然而应用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;}