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 ...

随机推荐

curl_redir_exec()函数
function curl_redir_exec($ch,$debug="") { static $curl_loops = 0; static $curl_max_loops = ...
ATMEGA16 IOport相关汇总
ATMEGA16 IOport总的共同所有权有关的寄存器有三个DDRX.PORTX和PINX. 假设你想IO动作基本上与这三个寄存器操纵.DDRX也被称为数据方向寄存器.PORTX所谓数据寄存器.PI ...
记一次内存泄漏DUMP分析
自从进入一家创业公司以后,逐渐忙成狗,却无所收获,感觉自身的技术能力用武之地很少,工作生活都在业务逻辑中颠倒. 前些天线上服务内存吃紧,让运维把DUMP拿下来,分析一下聊以自慰. 先来统计一下大对象信 ...
leetcode第23题--Swap Nodes in Pairs
Problem: Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1 ...
JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
算法回顾--N皇后问题简单回顾
前言最近学习的过程中,不知道哪门子的思维发散,突然又遇见皇后问题了,于是乎老调重弹,心里琢磨,虽然思路大家都容易懂,哪怕是最简单的野蛮回溯法,说着简单,但是如果非得编码实现?我可以一次性写出来OK的 ...
POCO Controller
---恢复内容开始--- POCO Controller 你这么厉害,ASP.NET vNext 知道吗? 写在前面阅读目录: POCO 是什么? 为什么会有 POJO? POJO 的意义 PO ...
MogileFS
分布式文件系统 ~MogileFS~ 一.分布式文件系统分布式文件系统(Distributed File System)是指文件系统管理的物理存储资源不一定直接连接在本地节点上,而是通过计算机网络与 ...
编写简单的hashCode方法
为什么要编写hashCode方法 hashCode在平时不常自己去编写,但是在真正高质量的代码中却是必不可少的. 看看Java中的Object对hashCode方法的描述: 1.返回对象的哈希码,是为 ...
2013集训.DAY21.A
随便点了一套刷,这套质量挺棒的,学了不少的东西,并且碰到了很久都没有打的题目 T1 card [指针技巧] 题1 集卡片 [问题描述] lzh小时候很喜欢收集卡片,他经常要去商店购买新到的卡片. 商店 ...

CSS3高级

CSS3高级的更多相关文章

随机推荐

热门专题