边框

  盒子圆角  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. bootstrap中container和container-fluid的区别

    container和container-fluid 在bootstrap中,两者都是设置文本居中,但是它们还是有很大差别的 container 是随屏幕宽度的变化而变化的,是阶段性变化,有一个随浏览器 ...

  2. Redis基于主从复制的RCE(redis4.x 5.x)复现

    使用docker建立redis 拉取镜像 运行 查看 可以连接,存在未授权 https://github.com/Ridter/redis-rce 发送poc i:正向连接 r:反弹 反弹成功

  3. solr 启动报错Cannot load analyzer: org.wltea.analyzer.lucene.IKAnalyzer

    schema.xml 配置文件信息: <field name="title" type="text_ik" indexed="true" ...

  4. 编译Solr4.72 源码没有成功

    最近需要用到solr,查询Hbase里面的数据,编译Solr的时候遇到了点问题: 下了solr的源码后需要用ant自己编译: 源码下载地址:https://svn.apache.org/repos/a ...

  5. 数组模拟stack

    package com.cxy.springdataredis.data; import java.util.Scanner; public class StackDemo { public stat ...

  6. ASP.NET Core Web应用在发布时选择是否对视图进行编译

    原文:ASP.NET Core Web应用在发布时选择是否对视图进行编译 在我们发布ASP.NET Core Web应用程序时,选择以文件形式发布,发布方法选择文件系统 默认情况下,会把Views的视 ...

  7. JS对象随机数 random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。 注意:返回一个大于或等于 0但小于1的符号为正的数值

    随机数 random() random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数. 语法: Math.random(); 注意:返回一个大于或等于 0 但小于 1 ...

  8. [NOIP2005] 过河【Dp,思维题,缩点】

    Online Judge:Luogu P1052 Label:Dp,思维题,缩点,数学 题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子 ...

  9. CSIC_716_20191113【装饰器进阶以及迭代器】

    装饰器的进阶主要包含叠加装饰器和有参装饰器 叠加装饰器:在一个被装饰的对象中,添加多个装饰器. 为什么要用叠加装饰器的原因:    -每一个新的功能都应该写一个新的装饰器,否则会导致,代码冗余,结构不 ...

  10. .net下MVC中使用Tuple分页查询数据

    主要是在DAL层写查询分页的代码. 例如DAL层上代码: public Tuple<List<WxBindDto>, int> GetMbersInfo(int start, ...