CSS3 简介
CSS的设计主要是为了实现文档内容与文档表示的分离,包括布局、颜色和字体等方面。它还可以用于以不同的方式显示web页面,可以根据您的屏幕大小进行更改。对文档设计的更改可以快速、轻松地应用。
边框(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-gradien)
线型渐变
.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>
径向渐变
/*指定渐变的形状:circle(圆形) ellipse(椭圆形 默认值) */
.box {
width: 250px;
height: 150px;
background: radial-gradient(100px 100px at top,#fcc,#cff);
/*X轴 Y轴 at 位置, 颜色1,颜色2 */
}
文本溢出(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;
}
transform 2D转换
转换就是使用transform属性将HTML元素
移动 translate
div { transform-origin: left top; transform: rotate(45deg); }
旋转 rotate
div { transform:rotate(45deg) /* 顺时针旋转45度,若果是负数逆时针旋转 */ }
缩放 scale
div { transform:scale(x,y); /* X轴缩放倍数 Y轴缩放倍数 可选默认值同第一个参数 */ }
倾斜 skew
div { transform: skew(45deg,60deg); /* 沿X轴倾斜的角度,沿Y轴倾斜的角度 可选,默认值是0 */ }
transform-origin
使用transform-origin
属性,可以更改元素转换的基准点
div {
transform-origin: left top;
/* 基准点X轴上的位置默认50%,基准点Y轴上的位置默认50% */
transform: rotate(45deg);
}
transition 过渡
button {
background: #fcc;
transition: 2s;
/* 过渡的时间 */
border: none;
}
button:hover {
background: #cff;
}
动画animation
动画animation的子属性有:
/* 指定由@keyframes描述的关键帧名称 */
animation-name: name;
/* 设置动画运行一周的时长 */
animation-duration: 3s;
/* 设置动画重复次数,可以指定 infinite 无限次重复动画*/
animation-iteration-count: 3;
/* 设置动画速度,即通过建立加速度曲线,设置动画在关键帧之间是如何变化*/
/*可以参考贝塞尔曲线*/
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
/*动画播放的方向。该值必须是animation-direction可用的值之一。*/
animation-direction:normal;
/* 设置延时,即从元素加载完成之后到动画序列开始执行的这段时间。*/
animation-delay: 3s;
/* 允许暂停和恢复动画。paused暂停 running开始 */
animation-play-state: running;
/* 指定动画执行前后如何为目标元素应用样式。 */
/* forwards 目标将保留由执行期间遇到的最后一个关键帧,最后一个关键帧取决于animation-direction和animation-iteration-count的值: */
animation-fill-mode: forwards;
综合写法:
/*名称 时长 动画运行速度 延时 次数 方向 保留最后一帧 */
animation: name duration timing-function delay iteration-count direction fill-mode;
使用keyframes定义动画序列关键帧使用 <percentage> 来指定动画发生的时间点。0%
表示动画的第一时刻,100%
表示动画的最终时刻。因为这两个时间点十分重要,所以还有特殊的别名:from
和 to
。这两个都是可选的,若 from/0%
或 to/100%
未指定,则浏览器使用计算值开始或结束动画。
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
弹性盒子(flexbox)
div {
display: flex;
/*开启弹性盒*/
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。