边框:

盒子圆角:border-radius:5px / 20%;

border-radius:5px 4px 3px 2px; 左上,右上,右下,左下。

盒子阴影:

box-shadow:

box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度)  阴影扩展半径 阴影颜色  投影方式
注意:inset 是指阴影在盒子内部,默认在外部,inset写到第一个或者最后一个参数位置,其他位置是无效的。

值有3个时,表示距离左侧、距离上侧、影子颜色;

值有4个时,表示距离左侧、距离上侧、虚化的像素、影子颜色;

值有5个时,表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转;

负值时,在相反的方向。

背景:

引入: background-image

背景尺寸: 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:修剪文本

自定义(string):自己定义符号,给定的字符串来代表被修剪的文本。

文本换行属性:

word-break:

word-break:break-all:它的内容就会到200px自动换行,
     如果该行末端有个英文单词很长(congratulation等),
     它会把单词截断,变成该行末端为conra(congratulation的前端部分),
     下一行为tulation(conguatulation)的后端部分了。

word-break:break-word:区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

颜色之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。

图片滤镜: filter

图片滤镜:模糊效果
.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}
高亮效果
.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}
对比度
.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}
灰色图像
.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
色相旋转
.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}
反转输入图像
.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
透明度
.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}
饱和度
.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}
深褐色
.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}
阴影效果
.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}

css3(1)的更多相关文章

  1. 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  2. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  3. 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  4. HTML5+CSS3(3)

    一.CSS3新增属性用法整理 1.box-shadow(阴影效果) 2.border-color(为边框设置多种颜色) 3.border-image(图片边框) 4.text-shadow(文本阴影) ...

  5. 从零开始学 Web 之 CSS3(一)CSS3概述,选择器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 CSS3(三)渐变,background属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 CSS3(七)多列布局,伸缩布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. css3(2)

    旋转: 2D:transform: rotate()——进行旋转,括号内部写旋转角度,默认顺时针旋转.允许负值,元素将进行逆时针旋转, translate()——从当前位置进行移动,括号内为x,y值. ...

  9. 菜鸟学习HTML5+CSS3(一)

    主要内容: 1.新的文档类型声明(DTD) 2.新增的HTML5标签 3.删除的HTML标签 4.重新定义的HTML标签 一.新的文档类型声明(DTD)    HTML 5的DTD声明为:<!d ...

  10. HTML5+CSS3(2)

    一.视频与音频 1.用JavaScript检测音频格式支持 <!DOCTYPE html> <html> <head> <meta charset=" ...

随机推荐

  1. java编程思想第四版第十三章字符串 总结

    1. String和StringBulider的使用 通过书中介绍, 我们得知如下结论: 当使用+连接符将字符串进行拼接的时候, 编译器会进行自动优化为使用StringBuilder连接字符串. 当在 ...

  2. 利用Xshell配置ssh免密码登录虚拟机,进行虚拟机与物理机的传输

    先说一下 Xshell如何无密连接虚拟机: ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口令(密码)认证方式是我们最常用的一种,这里介绍密钥认证方式登录到linux的方法.使用 ...

  3. thinkphp 5.1 去掉 .html 后缀

    thinkphp 5.1 去掉 .html 后缀  

  4. 【故障公告】docker swarm 集群问题造成新版博客后台故障

    非常抱歉,今天下午 16:55~17:05 左右,由于 docker swarm 集群的突发不稳定问题造成新版博客后台(目前处于灰度发布阶段)无法正常使用,由此给您带来麻烦,请您谅解. 出故障期时,新 ...

  5. linux后台运行程序--nobup

    用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 描述:nohup 命令运行由 Command 参数和任何相关的 Arg 参数指定的命令,忽略所有挂断 ...

  6. Jmeter---第一天配置中文环境、安装jmeter插件

    一:安装就不在赘述,百度有很多优秀的文章.接下来开始我自己的学习笔记 二:设置JMETER,切换中文环境. 首先打开jmeter的安装目录,找到bin文件目录中的jmeter.propertie 打开 ...

  7. python3快速入门教程错误和异常

    Python 中(至少)有两种错误:语法错误(syntax errors)和异常(exceptions). 语法错误 语法错误又称作解析错误: >>> while True prin ...

  8. 一文彻底搞懂CAS实现原理 & 深入到CPU指令

    本文导读: 前言 如何保障线程安全 CAS原理剖析 CPU如何保证原子操作 解密CAS底层指令 小结 朋友,文章优先发布公众号,如果你愿意,可否扫文末二维码关注下? 前言 日常编码过程中,基本不会直接 ...

  9. 2019牛客暑期多校训练营(第九场) E All men are brothers

    传送门 知识点:并查集+组合数学 并查集合并操作可以理解为使得两个集合的人互相成为朋友,也就是两个集合并在了一起,答案是要求从所有人中挑出四个互相不是朋友的四个人,比较基础的组合数学知识,但因为每个集 ...

  10. MySQL(学生表、教师表、课程表、成绩表)多表查询

    1.表架构 student(sid,sname,sage,ssex) 学生表 course(cid,cname,tid) 课程表 sC(sid,cid,score) 成绩表 teacher(tid,t ...