边框

　　盒子圆角　　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. go modules学习

    https://github.com/golang/go/wiki/Modules https://tonybai.com/2018/07/15/hello-go-module/ https://ww ...

  2. 拾遗：{rpm、yum及源码方式管理软件包}

    一.yum配置文件位置 /etc/yum.conf /etc/yum.repos.d/*.repo 二.yum常用命令 install pkgs reinstall pkgs update pkgs ...

  3. 剑指offer——23调整数组顺序使奇数位于偶数前面

    题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变.   题解: 一种是数 ...

  4. spring data jpa使用 （转：http://www.manongjc.com/article/25284.html#four_1_7）

    Jap相关的使用 时间:2018-12-18 本文章向大家介绍Jap相关的使用,主要包括Jap相关的使用使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. ...

  5. Ubuntu18.04安装RTX2080Ti+NVIDIA驱动+CUDA

    Ubuntu18.04安装RTX 2080Ti 与 Cuda10 ==========血泪更新========= 如果可以使用ppa安装最方便了 具体参考:https://www.cnblogs.co ...

  6. shell 基本系统命令，关机重启，查看版本，查手册，日期，磁盘，历史命令

    1. 查看系统版本及内核版本 cat /etc/issue  查看系统版本 uname -r     查看内核版本 2. 关机重启命令 关机: shutdown -h now    立即关机 shut ...

  7. cvErode和cvDilate腐蚀和膨胀函数

    Erode腐蚀,Dilate膨胀,这两个形态学函数总是成对出现,前者可以消除较小独点如噪音,后者可以使不连通的图像合并成块. void cvErode( const CvArr* src, CvArr ...

  8. 关于pip安装较慢的问题解决

    在 ~/.pip/ 下创建文件 pip.conf(如果还没有的话),并填入以下内容: [global] timeout = 6000 index-url = http://pypi.douban.co ...

  9. MySQL 其他基础知识

    -- 查询存储引擎show engines;-- 显示可用存储引擎show variables like 'have%'; -- concat多个字段联合select tname ,cname ,co ...

  10. win10 mysql5.7指定某个配置文件启动

    点击开始菜单,搜索cmd.exe,左击以管理员身份运行 C:\Users\Administrator>cd C:\Program Files\MySQL\MySQL Server 5.7\bin ...