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;
}
发表回复