三分钟带你掌握 CSS3 的新属性
文章目录
- 1. css3简介
- 2. css3边框
- 2.1 边框圆角
- 2.2 边框阴影
- 3. css3背景
- 3.1背景图大小
- 3.2背景图起始点
- 4. css3文本效果
- 4.1 文本阴影
- 4.2 文本换行
- 5. css3字体图标
- 6. css32D转换
- 7. css3 3D转换
- 8. css3 transition
- 8.1 单项改变
- 8.2 单项改多项改变
- 9. css3 动画
1. css3简介
CSS 用于控制网页的样式和布局,CSS3 是最新的CSS标准,CSS3 完全向后兼容,因此您不必改变现有的设计。浏览器通常支持 CSS2,但是现在大部分浏览器也实现了css3的很多特性。
CSS3 被划分为模块。其中最重要的 CSS3 模块包括:
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
2. css3边框
2.1 边框圆角
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
border-radius(边框圆角)语法如下:
border-radius:10px;代表四个方向都有一个微微的圆角
border-radius:50%;代表是正圆
2.2 边框阴影
box-shadow(边框阴影)语法如下:
div{box-shadow: 10px 10px 5px #888888;
}
第一个值代表阴影的水平偏移量,第二个值代表阴影的垂直偏移量,第三个值代表阴影的模糊度,第四个值代表阴影的颜色
3. css3背景
3.1背景图大小
background-size(背景图大小)
background-size:100px 100px; 可以给具体的数值
background-size:50% 50%; 可以给百分百 相对于父元素来说
background-size:cover; 会拉伸图片,填满div
background-size:contain; 拉伸图片的时候一个方向填满了,另一个方向停止了
3.2背景图起始点
background-origin这个属性可以设置背景图到底是以content、padding还是border为起点来放置背景图
而且css3还允许一个div放置多张背景图
4. css3文本效果
4.1 文本阴影
text-shadow是规定文本阴影的,第一个值是阴影的水平偏移量,第二个值是阴影的垂直偏移量,第三个值是模糊度,第四个值是阴影的颜色。
h1{text-shadow: 5px 5px 5px #FF0000;
}
4.2 文本换行
CSS3 自动换行
允许对长单词进行拆分,并换行到下一行:
p {word-wrap:break-word;}
5. css3字体图标
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3,web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。
先定义自己的字体名称然后使用自己定义的字体
<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>
当然我们一般使用阿里巴巴矢量图标库引用字体文件比较多,前面已经讲过,这里不赘述。
6. css32D转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
语法如下:
translate()
div{transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */}
rotate()
div{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */}
scale()
div{transform: scale(2,4);-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari 和 Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */}
skew()
div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */}
7. css3 3D转换
8. css3 transition
8.1 单项改变
div{transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
8.2 单项改多项改变
div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}
9. css3 动画
语法如下:
@keyframes myfirst
{from {background: red;}
to {background: yellow;}
}@-moz-keyframes myfirst /* Firefox */
{from {background: red;}
to {background: yellow;}
}@-webkit-keyframes myfirst /* Safari 和 Chrome */
{from {background: red;}
to {background: yellow;}
}@-o-keyframes myfirst /* Opera */
{from {background: red;}
to {background: yellow;}
}
三分钟带你掌握 CSS3 的新属性相关推荐
- 三分钟带你了解专精特新的申报时间和流程
近两年,专精特新在市场上掀起了一阵热潮,有不少企业都听过专精特新,特别是企业在得知专精特新还有补贴可以领取的时候,更是想进一步的了解专精特新,那也有不少企业会问到,补贴的金额是多少,申报时间等等相关的 ...
- 三分钟带你看懂prototype原型——ES6进阶
三分钟带你看懂prototype原型--ES6进阶 1. prototype 定义 2. new 构造函数 3. 存储 4. prototype 作用 1. prototype 定义 在JS中的类的实 ...
- 三分钟带你弄懂slot插槽——vue进阶
文章目录 三分钟带你弄懂slot插槽--vue进阶 一.概述 程序员之死 什么是 slot插槽? 2.6.0 版本中的 slot 二.具名插槽 例子 效果图 代码 三.小惊喜 三分钟带你弄懂slot插 ...
- mysql和oracle冲突吗_三分钟带你分清MySQL 和Oracle之间的误区
原标题:三分钟带你分清MySQL 和Oracle之间的误区 来自:华为云开发者社区 摘要:MySQL和Oracle,别再傻傻分不清. MySQL 和Oracle 在开发中的使用是随处可见的,那就简单去 ...
- 三分钟带你看懂HDMI接口的PCB设计
三分钟带你看懂HDMI接口的PCB设计 本文主要讲解的是HDMI的设计,包括作用和运用的总结,希望大家看了以后能轻松的应对各种HDMI方案的PCB设计. 一.什么是HDMI? 高清晰度多媒体接口(英文 ...
- 三分钟带你读懂 BERT
本文为 AI 研习社编译的技术博客,原标题 : BERT Technology introduced in 3-minutes 作者 | Suleiman Khan, Ph.D. 翻译 | 胡瑛皓.s ...
- 建网站的最简单方法(三分钟带后台)
建网站的最简单方法(三分钟带后台) 准备材料 服务器或者本地环境 安装过程 准备材料 织梦二次开发模板或者Ecshop二次开发模板等(我以织梦为例讲解) 如果是本地需要下载ComsenzEXP或者Wa ...
- 三分钟带你了解不一样的场效应管
目前市场上的场效应管主要分为两种,但不论是哪种,场效应管都具有功耗低噪声小,而且不会出现二次击穿的特点,这让其成为替代晶体管的最佳产品.随着场效应管应用面积的扩大,对场效应管的选择和检查也成为了设计者 ...
- 三分钟带你弄懂GFS(Google File System)
提示:预计阅读时间三分钟,该文章仅对GFS做了一的简略介绍,细节方面建议阅读原文. 文章目录 前言 一.GFS是什么? 1.1 简单介绍 1.2 我们为什么需要阅读GFS的论文? 1.3 GFS论文对 ...
最新文章
- 使用Oracle调度程序自动完成任务
- 独家 | 在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)
- 【PP生产订单】入门介绍(三)
- POJ - 2175 Evacuation Plan(最小费用最大流+消圈定理)
- VIM之Project 项目管理工具
- 【SpringCloud】服务注册之 Consul
- shell基础命令管理
- 2020年Tor Project的加密货币捐款增加23%达23万美元
- 数学建模 时间序列分析
- linux standby模式,搭建11g 单机 linux standby 操作文档
- 【翻译】Geometric Features-Based Parking Slot Detection
- 【TSP】基于matlab遗传算法求解13城市旅行商问题【含Matlab源码 1255期】
- postsql将MULTIPOLYGON转POLYGON
- js中的shift()函数
- dbm与mysql_关于dBm与功率转换
- java PDF模板生成并导出(文字、表格、图片)
- 最新360脱壳详细教程(有图有真相
- C语言编程>第十六周 ⑤ 请补充fun函数,该函数的功能是:依次取出字符串中所有大写字母,形成新的字符串,并取代原字符串。
- 黑龙江民族职业学院数据备份集成
- html div浏览器居中显示,IE浏览器DIV居中实现方法
热门文章
- 强化学习——Qlearning
- 机器学习两种距离——欧式距离和马氏距离
- Random Forest 资源汇总(待续)
- Tomcat启动失败错误解决Could not publish server configuration for Tomcat v8.0 Server at localhost....
- [USACO15FEB]Superbull (最小生成树)
- content-type对照表
- Mysql中各种与字符编码集(character_set)有关的变量含义
- 回溯算法 ------回溯算法的几个例子
- linux设置history历史记录
- 返回对应对象的克隆方法