边框

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

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

  2. scrapy爬取cnblogs文章列表

    scrapy爬取cnblogs文章 目标任务 安装爬虫 创建爬虫 编写 items.py 编写 spiders/cnblogs.py 编写 pipelines.py 编写 settings.py 运行 ...

  3. iOS开发之UIMenuController

    1.简介 用于剪切.复制.粘贴.选择.选择ALL和DELETE命令的菜单界面. UITextField.UIWebView.UITextView自带有这种UIMenuController效果: 2.相 ...

  4. Linux下同一目录内文件和目录为什么不能同名？

    问题描述: 如果事先有叫‘A’的文件夹存在,则不允许建立叫‘A’的文件: 同理若先有叫‘b’的文件存在,一样不允许建立叫‘b’的文件夹. 原因很简单,因为Linux下一切都是文件,一个目录归根到底还是 ...

  5. jupyter安装_pip法

    安装jupyter notebook的流程(注意python至少需要3.6版本) python -m pip install jupyter  #安装jupyter python -m pip ins ...

  6. Linux sed命令实现替换文本内容

    /root/data/code-s3201/publish_codex/deploy/db.properties db.properties中的 1.0.0.6 替换为 1.0.0.7 sed -i ...

  7. JS对象 神奇的Math对象，提供对数据的数学计算。注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别

    Math对象 Math对象,提供对数据的数学计算. 使用 Math 的属性和方法,代码如下: <script type="text/javascript"> var m ...

  8. SQL链接EXCEL操作

    Sub CopyData_5() Set Cnn = CreateObject("ADODB.Connection")With Cnn.Provider = "micro ...

  9. Android开发 retrofit下载与上传

    前言 此博客只讲解retrofit下载与上传的使用,其实与其说是retrofit的下载与上传还不如说,依然是Okhttp的下载与上传.如果你需要了解retrofit入门请查看这篇博客(此博客不在详细讲 ...

  10. CSIC_716_20191104【流程控制语句】

    流程控制语句 if 语法结构 if 逻辑判断为真 : xxxxxx else: xxxxx while 语法结构  (continue.break) while 逻辑判断为真: xxxxxxx con ...