关于css3:css3的新特性

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;}