边框

　　盒子圆角　　border-radius：5px / 20%；

　　　　　　　　border-radius:5px 4px 3px 2px; 左上，右上，右下，左下

　　盒子阴影　　box-shadow：box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径 阴影颜色 投影方式

　　　　　　　　　　　　　　注意：inset 是指阴影在盒子内部，默认在外部，inset写到第一个或者最后一个参数位置，其他位置是无效的

　　　　　　　　值有3个时，表示距离左侧、距离上侧、影子颜色     值有4个时，表示距离左侧、距离上侧、虚化的像素、影子颜色

　　　　　　　　值有5个时，表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转

　　　　　　　　负值时，在相反的方向

背景

　　背景尺寸     background-size  auto默认值，不改变图片的大小    长度值  200px 50px  代表宽高依次是200 50　　百分比 同长度值   cover填充整个外层容器

　　背景平铺　　background-repeat

　　背景位置　　位置定位1（background-origin） 根据文本位置：content-box   根据边框位置：border-box  根据内边距位置:padding-box   使用这个属性，必须设置背景为no-repeat

　　　　　　　　位置定位2（background-position）top right  bottom  left  background-position:距左多少   距右多少

　　多重背景　　逗号分割：background-image:url(images/bg_flower.gif), url(images/border.png); background-repeat:no-repeat;

字体

　　文本阴影　　text-shadow：三个值：分别代表距离左侧、距离上侧、阴影颜色  阴影会显示文字

　　　　　　　　text-shadow：四个值：分别代表距离左侧、距离上侧、模糊程度及阴影颜色

　　文本溢出属性　　overflow: hidden;  white-space:nowrap;让文本强制不换行  要先设置这两个属性

　　　　　　　　　　text-overflow　　clip：修剪文本。  ellipsis：显示省略符号来代表被修剪的文本    自定义（string）：自己定义符号，给定的字符串来代表被修剪的文本

　　文本换行属性　　word-break:　　word-break:break-all　　它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　下一行为tulation（conguatulation）的后端部分了。

　　　　　　　　　　　　　　　　　　word-break:break-word;    区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

　　引入服务器上的字体样式 　　@font-face{font-family:字体名称;src:字体文件在服务器上的路径}

颜色之RGBA与透明度opcity　　

　　R：红 G：绿 B：蓝  alpha:透明度的参数

　　RGB的取值范围是0~255/0~100%   alpha的取值范围是0~1  不可为负值

　　opcity　　取值范围0~1

渐变颜色

　　background-image: linear-gradient(to bottom,#fff,red);

　　参数说明：第一个参数指定渐变方向 to top,to bottom,to right,to left,to top left......
　　第二和第三个参数：是指定开始与结束的颜色值 可以有多个颜色background-image: linear-gradient(to bottom,#fff,black,red);

图片

　　图片圆角　　border-radius: 50%;（设置椭圆形）

　　设置图片为响应式　　  max-width: 100%;height: auto;

　　图片阴影　　box-shadow

　　图片滤镜   详情见下方代码中

旋转

　　2D　　transform:　　rotate()——进行旋转，括号内部写旋转角度，默认顺时针旋转.允许负值，元素将进行逆时针旋转

　　　　　　　　　　　　translate()——从当前位置进行移动，括号内为x，y值。允许负值，将反方向移动       transform:translate(30px,30px)：向右30px，向下30px移动，原来位置保存

　　　　　　　　　　　　scale()——改变原始尺寸，按照倍数变化，括号内为width、height的倍数　　     transform:scale(2,4)：宽度变为2倍，高度变为4倍

　　　　　　　　　　　　skew()——水平、垂直方向进行扭转，括号内是水平扭转角度、垂直扭转角度     transform:skew(30deg,0deg);将横向扭转30度的div，内部文字会跟随扭转

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　transform:skew(0deg,30deg);将纵向扭转30度的div，内部文字会跟随扭转
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　transform:skew(30deg,30deg);将横向扭转30度、纵向扭转30度的div，内部文字会跟随扭转

　　3D　　transform　　rotateX()——沿水平X轴进行垂直的翻转，括号内写转动度数

　　　　　　　　　　　 rotateY()——沿垂直Y轴进行水平的翻转，括号内写转动度数

　　2D与3D的区别　　2D转换跟3D转换的区别：2D转换仅仅在于平面，文字可以看出并没有反过来

　　　　　　　　　　　3D转换是相当于镜面效果的，进行了前后空间（涉及到了Z轴）的占用进行的翻转。

代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			.aa{

				width: 100px;

				height: 100px;

				/* border: 1px solid; */

				/* background-color: rgba(220,230,242,1);/*最后一位是透明度 */

				/* opacity: 1;0到1设置透明度 */

				background-image: linear-gradient(to bottom,#fff,red,blue);/* 背景渐变 */

				transform: rotate(8deg);

				transform:translate(30px,30px);

				 transform:skew(30deg,0deg);

			}

			img{

				border-radius: 50%;/* （设置椭圆形） */

				max-width: 100%;height: auto;

				box-shadow:2px 2px  #0000FF;

				transform: rotate(8deg);

			}

			img:hover{

				transform: rotate(8deg) translate(30px,30px) scale(1.1,1.1);;

				 /* transform:scale(2,4); */

				/* 模糊效果 blur*/

				/* filter: blur(4px); */

				/* 高亮效果 */

				/* filter: brightness(0.30); */

				/* 对比度 */

				/* filter: contrast(180%); */

				/* 灰色图像 */

				/* filter:grayscale(100%); */

				/* 色相旋转 */

				/* filter: hue-rotate(180deg); */

				/* 反转输入图像 */

				 /* filter: invert(100%); */

				 /* 透明度 */

				 /* filter: opacity(50%); */

				 /* 饱和度 */

				 /* filter: saturate(7); */

				 /* 深褐色 */

				 /* filter: sepia(100%); */

				 /* 阴影效果 */

				 filter: drop-shadow(8px 8px 10px green);

			}

		</style>

	</head>

	<body>

		<img src="../祝庆迎zuoye10.28/img/5.jpg" >

		<div class="aa">

		</div>

	</body>

</html>

效果

学习笔记css3的更多相关文章

  1. HTML 学习笔记 CSS3(Animation)

    CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 ...

  2. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  3. HTML 学习笔记 CSS3 (多列)

    CSS3多列 通过CSS3 我们能够创建多个列来对文本进行布局. 在这篇文章中 你将了解到如下多列属性: column-count column-gap column-rule 浏览器支持: 多列的属 ...

  4. HTML 学习笔记 CSS3 (2D Matrix)

    Matrix 矩阵 那么什么是矩阵呢? 矩阵可以理解为方阵,只不过 平时方阵里面站着人 矩阵中是数值: CSS3中的矩阵: css3中的矩阵指的是一个方法,书写为matrix() 和 matrix3d ...

  5. HTML 学习笔记 CSS3 (2D转换)

    2.scaleX(<number>) : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数.scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在 ...

  6. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

  7. HTML 学习笔记 CSS3 (背景)

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在CSS3里面 你可以在一个标签元素里应用多个 ...

  8. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  9. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  10. [CSS3] 学习笔记-CSS3盒子样式

    1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...

随机推荐

  1. ionic-CSS：ionic 头部与底部

    ylbtech-ionic-CSS:ionic 头部与底部 1.返回顶部 1. ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ion ...

  2. java执行spark查询hbase的jar包出现错误提示：ob aborted due to stage failure: Master removed our application: FAILED

    执行java调用scala 打包后的jar时候出现异常 /14 23:57:08 WARN TaskSchedulerImpl: Initial job has not accepted any re ...

  3. React:JS中的this和箭头函数

    JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中 ...

  4. Mybatis与Spring整合（CURD）

    项目采用Maven构建,用Junit进行测试,数据库是Mysql,连接池是c3p0,未测试缓存部分 1.Maven的“pom.xml”文件 <project xmlns="http:/ ...

  5. VS2017打包

    转载:https://blog.csdn.net/Houheshuai/article/details/78518097 在要打包项目的解决方案 右键→添加→ 新建项目 ​ 后出现如下选择 ​ 如果没 ...

  6. The linux command之环境

    一.环境 shell在环境中存储了两种数据类型:环境变量(environment variables )shell变量(shell variables).在shell中这两种变量基本没有什么不同. 此 ...

  7. Perl 基础语法

    Perl 基础语法 Perl借用了C.sed.awk.shell脚本以及很多其他编程语言的特性,语法与这些语言有些类似,也有自己的特点. Perl 程序有声明与语句组成,程序自上而下执行,包含了循环, ...

  8. 树形dp——cf1010D

    一个点的改变如果对根节点的值不会造成任何影响,那么这个点的所有子节点的改变也不会对根节点造成影响 因为每次只改一个叶子节点,也就是一条到根的路径,可以先预处理出初始情况下的每个结点的值 分别讨论根节点 ...

  9. 牛客多校第六场 E Androgynos 自补图

    题意: 给定点数,构造自补图,要求输出邻接矩阵,和原图与补图的同构映射. 题解: 只有点数为4k和4k+1的情况才能构造自补图,因为只有这些情况下边数才为偶数. 一种构造方式是,邻接矩阵和同构映射增量 ...

  10. PostMan授权认证使用

    Authorization 对于很多应用,出于安全考虑我们的接口并不希望对外公开.这个时候就需要使用授权(Authorization)机制. 授权过程验证您是否具有访问服务器所需数据的权限. 当发送请 ...