边框

　　盒子圆角　　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. css3学习笔记之背景

    background-size background-size指定背景图像的大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 &l ...

  2. [CSS3]学习笔记-文字与字体相关样式

    1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  3. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  4. Android学习笔记进阶之在图片上涂鸦(能清屏)

    Android学习笔记进阶之在图片上涂鸦(能清屏) 2013-11-19 10:52 117人阅读 评论(0) 收藏 举报 HandWritingActivity.java package xiaos ...

  5. 我的CSS3学习笔记

    1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...

  6. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

  7. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  8. [学习笔记]平衡树（Splay）——旋转的灵魂舞蹈家

    1.简介 首先要知道什么是二叉查找树. 这是一棵二叉树,每个节点最多有一个左儿子,一个右儿子. 它能支持查找功能. 具体来说,每个儿子有一个权值,保证一个节点的左儿子权值小于这个节点,右儿子权值大于这 ...

  9. iOS学习笔记31-从图册获取图片和视频

    一.从图册中获取本地图片和视频 从图册中获取文件,我们使用的是UIImagePickerController,这个类我们在之前的摄像头中使用过,这里是链接:iOS学习笔记27-摄像头,这里我们使用的是 ...

随机推荐

  1. Java-Class-@I：org.springframework.stereotype.Service

    ylbtech-Java-Class-@I:org.springframework.stereotype.Service 1.返回顶部   2.返回顶部 1. package com.ylbtech. ...

  2. UVA Ananagrams /// map set

    https://vjudge.net/problem/UVA-156 题目大意: 输入文本,找出所有满足条件的单词——该单词不能通过字母重排而得到输入的文本中的另外一个单词. 在判断是否满足条件时,字 ...

  3. MVC 传递数据 从前台到后台，包括单个对象，多个对象，集合

    MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合 1.基本数据类型 我们常见有传递 int, string, bool, double, decimal 等类型. 需要注意的是前台传递的参 ...

  4. iOS开发系列-异常处理

    概述 在开发中经常调用苹果的API遇到数组越界.实例方法不存在运行时等致命错误,此时程序直接奔溃.其实苹果是在函数内部抛出了一个异常.这样告诉开发者需要检查代码做修改.同样在我们自己封装一些框架或者功 ...

  5. arm-linux-objdump 的使用

    1. 查看静态库或.o 文件的组成文件 [arm@localhost gcc]$ arm­linux­objdump ­a libhello.a 2. 查看静态库或.o 文件的络组成部分的头部分 [a ...

  6. js数组方法 slice()和splice()

    说实在我之前都不怎么分的清这个两个函数,因为这两个函数名字那么像,经常我就弄混了,平常使用的时候都先查一下我需要使用的实际是哪个函数.这样不说很浪费时间,但是也是影响了开发效率,所以我决定今天就彻底区 ...

  7. android Toast提示异常：java.lang.RuntimeException: Can't create handler inside thread that has not called

    Toast只能在UI线程弹出,解决此问题可以在Toast前后加两行代码,如下所示: Looper.prepare(); Toast.makeText(getApplicationContext(),& ...

  8. double to string 损失精度的问题

    https://blog.csdn.net/magieclarence/article/details/6792511?utm_source=blogxgwz0 类似于这样 double 的精度是一个 ...

  9. Java 基础 - instanceof关键字

    instanceof 父类子类 结论: 子类 instanceof 父类 == true 父类 instanceof 子类 == false public class Test { public st ...

  10. Windows mkdir

    创建目录. MKDIR [drive:]pathMD [drive:]path 如果命令扩展被启用,MKDIR 会如下改变: 如果需要,MKDIR 会在路径中创建中级目录.例如: 假设 \a 不存在, ...