边框

　　盒子圆角　　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 checkbox（复选框）

    ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...

  2. 基于Netty的RPC架构学习笔记（四）：netty线程模型源码分析（一）

    文章目录 如何提高NIO的工作效率 举个

  3. 常用的css解决方案

    一. css 2.x code 1. 文字换行  /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: n ...

  4. css玩转文字

    <div style=" direction:rtl; unicode-bidi:bidi-override">文字被反转过来了</div> 执行后的效果为 ...

  5. IDEA @Autowired dao大红波浪线

    SptingBoot+Mybatis开发通常在dao层的注解是@Mapper 这样每次在ServiceImpl层加注解@Autowired时,注入的dao总是波浪线烦人,其实并没有错,只是idea你太 ...

  6. LightOJ 1245 - Harmonic Number (II)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1245 题意:仿照上面那题他想求这么个公式的数.但是递归太慢啦.让你找公式咯. ...

  7. 21-2-substring

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. flutter 底部bottomNavigationBar凸起效果

    概要 最近在做flutter 的时候,之前看到想实现 底部导航栏中间按钮 凸起效果, 最近想做又突然找不到方案了,因此记录下这里的实现方式. 预览效果 代码 主要使用 BottomAppBar 组建, ...

  9. [转]关于Repository模式

    原文链接:关于Repository模式 定义(来自Martin Fowler的<企业应用架构模式>): Mediates between the domain and data mappi ...

  10. GetOpenFilename的基本用法(文件夹实操)

    Sub 数据导入()Dim f, arr, i&, j&, k, m%, n%, p%, sh As Workbookf = Application.GetOpenFilename(f ...