CSS3高级
一、学习目标
二、box-sizing属性
语法：box-sizing: content-box|border-box|inherit
box-sizing属性的用法：
box-sizing属性可以为三个值之一：
content-box（default），border-box，padding-box。
1.content-box，border和padding不计算入width之内
2.padding-box，padding计算入width内
3.border-box，border和padding计算入width之内
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
} .padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
} .border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
} </style> </head> <body>
<div class="content-box"> </div> <div class="padding-box"> </div> <div class="border-box"> </div> </body>
实现效果：
由于浏览器兼容性问题，可能会出现以下效果：
三、box-shadow（盒子阴影）
语法：box-shadow: h-shadow v-shadow blur spread color inset;
取值如下： <length> <length> <length>? <length>? || <color>：
阴影水平偏移值（可取正负值）；
阴影垂直偏移值（可取正负值）；
阴影模糊值；阴影颜色
-moz-, -webkit-, -o-这些都是浏览器前缀。
常用前缀和浏览器的对应关系如下：
Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-
<body>
<img src="hh.png"></img>
</body>
四、圆角属性值
语法： border-radius: 1-4 length|% / 1-4length|%;
注释：按此顺序设置每个 radii 的四个值。
如果省略 bottom-left，则与 top-right 相同。
如果省略 bottom-right，则与 top-left 相同。
如果省略 top-right，则与 top-left 相同。
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
案例：
<body>
<div></div>
</body>
四、CSS3 2D变形
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
2D转换的属性名为transform，使用方法为transform:method(value)。
2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等
CSS3 2D转换详解：
<style type="text/css">
.wrap {
position:absolute;
left:50%;
top:50%;
transition: all 0.5s ease-in-out;
width: 80px;
background: red;
color: pink;
text-align: center;
padding: 10px;
border-radius: 6px;
font-size: 18px;
}
/* 平移 */
.wrap:hover{transform:translate(20px,20px);}
/* 旋转 */
.wrap:hover{transform:rotate(90deg);}
/* 倾斜 */
.wrap:hover{transform:skew(30deg,10deg);}
/* 缩放 */
.wrap:hover{transform:scale(1.2);}
/* 组合 */
.wrap:hover{transform:scale(1.5) rotate(90deg);}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
五、css3过渡
CSS3过渡属性:
<!-- 过渡 -->
<style type="text/css"> a{
-webkit-transition:padding 1s ease-out,backgrond-color 2s linear;
} a:hover{
padding-left: 20px;
background-color: pink;
} </style> </head> <body> <a href="#">魔鬼中的天使</a><br/>
<a href="#">魔鬼中的天使</a><br/>
<a href="#">魔鬼中的天使</a><br/> </body>
六、css3动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
css3动画属性：
<style type="text/css">
div{
position:absolute;top:50%;
left:50%;overflow:hidden;
width:300px;height:150px;
margin:-75px 0 0 -150px;
border:3px solid #eee;
background:#e0e0e0;
}
.one{
opacity:0;
display: block;
font-weight: bold;
height: 50px;
-webkit-animation:ersha 5s ease-out;
}
.two{
opacity:0;
display: block;
font-weight: bold;
height: 50px;
-webkit-animation:doubi 5s ease-out 5s forwards;
}
@-webkit-keyframes ersha{
0%{opacity:0; transform:translate(0px)}
10%{opacity:0.2; transform:translate(20px) }
20%{opacity:0.4; transform:translate(40px)}
100%{opacity:1; transform:translate(100px)}
}
@-webkit-keyframes doubi{
0%{opacity:0; transform:translate(0px)}
10%{opacity:0.2; transform:translate(20px) }
20%{opacity:0.4; transform:translate(40px)}
100%{opacity:1; transform:translate(100px)}
}
</style>
</head>
<body>
<div>
<span class="one">我会移动，你信吗，嘻嘻</span>
<span class="two">我会移动，你信吗，嘿嘿</span>
</div>
</body>
CSS3高级的更多相关文章
- CSS3 高级属性
尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...
- CSS3高级选择器
CSS3中添加了一些新的选择器 与之前的不同 这些选择器有些类似于jquery的选择器 能够让我们更高的操作DOM 废话不多说 为了更直观的了解 我们以这段为实例 来进行操作 <!DOCTYPE ...
- js 控制 css3高级运动 keyframes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3高级运动keyframes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 初识CSS3
1.CSS规则由两部分构成,即选择器和声明器 声明必须放在{}中并且声明可以是一条或者多条 每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开 注意: css的最后一条声明 ...
- 第四章：初识CSS3
1.CSS规则由两部分构成,即选择器和声明器 声明必须放在{}中并且声明可以是一条或者多条 每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开 注意: css的最后一条声明,用以结 ...
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- 零基础学 HTML5+CSS3 全彩版 明日科技 编著
第1章 基础知识 1.1 HTML概述 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.2 HTML文件的基本结构 1.2.1 HTML的基本结构 1.2.2 HTML的基本标记 1. ...
- 让IE8一下兼容CSS3选择器
来自英国的网页开发工程师Keith Clark 开发了一个JavaScript方案来使IE支持CSS3选择器.该脚本支持从IE5到IE8的各个版本. 首先,您需要下载DOMAssistant脚本和ie ...
随机推荐
- Upload无刷新上传控件
Upload无刷新上传控件 最近在做一个web开发项目 ,用到upload上传控件 ,由于c#提供的控件局限性太大 ,所以就自己从国外大牛 手里借鉴一下. 该控件可以判断上传的文件是否已存在 ,减少了 ...
- SQLServer中处理每天四亿三千万记录
我是如何在SQLServer中处理每天四亿三千万记录的 首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地 ...
- 布尔逻辑运算，goto语句
布尔逻辑 bool类型可以有两个值:true或者false. 布尔比较需要使用布尔比较运算符(关系运算符),下图:var1为布尔类型的变量,var2,var3则可以是不同类型.
- Eclipse在SVN安装步骤（两种）和使用方法
一.至Eclipse安装SVN,最常见的两种方式:手动模式,使用安装向导.具体操作步骤如下: 单程:手动安装 1.官方网站下载,从site-1.6.9.zip文件,网址是:subclipse.tigr ...
- asp.net请求响应模型原理随记回顾
asp.net请求响应模型原理随记回顾: 根据一崇敬的讲师总结:(会存在些错误,大家可以做参考) 1.-当在浏览器输入url后,客户端会将请求根据http协议封装成为http请求报文.并通过主sock ...
- C# socket通信随记回顾
----tcp(传输 控制 协议)是可靠消息:三次握手(发给对方,对方发给自己,证明对方接到消息,在发给对方,说明自己能接到对方消息,这样就都知道了):tcp:每发送一次消息,对方都会回复,证明接受到 ...
- DropDownList和GridView用法
DropDownList和GridView用法 DropDownList控件和GridView控件在Asp.net中相当常用,以下是控件的解释,有些是常用的,有些是偶尔的,查找.使用.记录,仅此而 ...
- 2014.3.4-C语言学习小结
位操作: 知识点: 1.位运算符 2.位移运算符 1.将指定位设置为12.将指定位设置为03.获取指定位的内容 ==========================复习二进制 1.二进制转换 10-- ...
- 关于Django模板引擎的研究
原创博文,转载请注明出处. 以前曾遇到过错误Reverse for ‘*’ with arguments '()' and keyword arguments' not found.1其原因是没有给视 ...
- 统计重1到n的正整数中1的个数
问题: 给定一个十进制正整数N,写下从1开始,到N的所有整数,然后数一下其中出现的所有“1”的个数. 例如:N= 2,写下1,2.这样只出现了1个“1”. N= 12,我们会写下1, 2, 3, 4, ...