Css3新增的特性(1)
2024-10-09 13:58:06
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>
最新文章
- C# 合并及拆分Word文档
- mysql general log日志
- 获取 IP 地址
- javascript检验工具的比较
- 在Windows Azure上搭建SSTP VPN
- 关于c语言中qsort函数的一点心得
- jquery 禁止页面滚动-移动端
- MyBatis学习 之 二、SQL语句映射文件(1)resultMap
- Prim和Kruskal最小生成树
- jquery左右轮播
- spring 组件自动装载示例(@ComponentScan,@Component,@Scope)
- 在mac上安装Docker
- mybatis增强
- j2ee期末项目 新闻发布系统需求文档
- 打印sql
- Pyhton对象解释
- Vue 中的动画特效
- 移动端input验证只允许有数字 在safari浏览器一直不成功解决
- java属性编辑器,即PropertyEditor
- centos6.9系统优化