Css3新增的特性（1）

CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

一. CSS3 边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序。

边框属性：

border-radius（圆角属性）eg:{border:2px solid;border-radius:25px;}
box-shadow（添加阴影） eg:{box-shadow: 10px 10px 5px #888888;}
border-image（图片作为边框）eg:{border-image:url(border.png) 30 30 round;}

二.CSS3 背景

CSS3 中包含几个新的背景属性，提供更大背景元素控制。

background-image(添加背景图片) 【CSS3 允许你在元素上添加多个背景图像】
background-size(指定背景图像的大小)
background-origin（指定了背景图像的位置区域）
background-clip（背景剪裁属性是从指定位置开始绘制）

三.CSS3 渐变（gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向（background-image: linear-gradient(direction, color-stop1, color-stop2, ...);）
径向渐变（Radial Gradients）- 由它们的中心定义（background-image: radial-gradient(shape size at position, start-color, ..., last-color);）

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);   // css3线性渐变语法
background-image: linear-gradient(#e66465, #9198e5); // 从上到下的线性渐变
background-image: linear-gradient(to right, red , yellow); //从左到右的线性渐变
background-image: linear-gradient(to bottom right, red, yellow); //从左上角到右下角的线性渐变

background-image: linear-gradient(angle, color-stop1, color-stop2); // 使用角度语法
background-image: linear-gradient(-90deg, red, yellow); //带有指定的角度的线性渐变
background-image: linear-gradient(red, yellow, green); //带有多个颜色节点的从上到下的线性渐变
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); //如何创建一个带有彩虹颜色和文本的线性渐变
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));//从左到右的线性渐变，带有透明度
background-image: repeating-linear-gradient(red, yellow 10%, green 20%); //repeating-linear-gradient() 函数用于重复线性渐变

background-image: radial-gradient(shape size at position, start-color, ..., last-color);//CSS3 径向渐变语法
background-image: radial-gradient(red, yellow, green); //颜色节点均匀分布的径向渐变
background-image: radial-gradient(red 5%, yellow 15%, green 60%); //颜色节点不均匀分布的径向渐变
background-image: radial-gradient(circle, red, yellow, green);// 形状为圆形的径向渐变
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);//带有不同尺寸大小关键字的径向渐变 (
                                                                                                            closest-side
                                                                                                            farthest-side
                                                                                                            closest-corner
                                                                                                            farthest-corner
                                                                                                            )
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);//一个重复的径向渐变

四.CSS3 文本效果

CSS3中包含几个新的文本特征。

text-shadow（适用于文本阴影）eg:{text-shadow: 5px 5px 5px #FF0000;} 您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
box-shadow （适用于盒子阴影）eg:{box-shadow: 10px 10px 5px #888888;}
text-overflow（CSS3文本溢出属性指定应向用户如何显示溢出内容）

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

word-wrap（允许长文本换行）eg:{word-wrap:break-word;}
word-break（CSS3 单词拆分换行属性指定换行规则）

p.test1 {
    word-break: keep-all;
}
 
p.test2 {
    word-break: break-all;
}

五.CSS3 字体

CSS3 @font-face 规则

使用 CSS3，当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>

posted on 2020-09-14 10:41 小名香菜~ 阅读(135) 评论(0) 编辑收藏举报