css3(1)
边框:
盒子圆角: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)的更多相关文章
- 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- HTML5+CSS3(3)
一.CSS3新增属性用法整理 1.box-shadow(阴影效果) 2.border-color(为边框设置多种颜色) 3.border-image(图片边框) 4.text-shadow(文本阴影) ...
- 从零开始学 Web 之 CSS3(一)CSS3概述,选择器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 CSS3(三)渐变,background属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 CSS3(七)多列布局,伸缩布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- css3(2)
旋转: 2D:transform: rotate()——进行旋转,括号内部写旋转角度,默认顺时针旋转.允许负值,元素将进行逆时针旋转, translate()——从当前位置进行移动,括号内为x,y值. ...
- 菜鸟学习HTML5+CSS3(一)
主要内容: 1.新的文档类型声明(DTD) 2.新增的HTML5标签 3.删除的HTML标签 4.重新定义的HTML标签 一.新的文档类型声明(DTD) HTML 5的DTD声明为:<!d ...
- HTML5+CSS3(2)
一.视频与音频 1.用JavaScript检测音频格式支持 <!DOCTYPE html> <html> <head> <meta charset=" ...
随机推荐
- java编程思想第四版第十三章字符串 总结
1. String和StringBulider的使用 通过书中介绍, 我们得知如下结论: 当使用+连接符将字符串进行拼接的时候, 编译器会进行自动优化为使用StringBuilder连接字符串. 当在 ...
- 利用Xshell配置ssh免密码登录虚拟机,进行虚拟机与物理机的传输
先说一下 Xshell如何无密连接虚拟机: ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口令(密码)认证方式是我们最常用的一种,这里介绍密钥认证方式登录到linux的方法.使用 ...
- thinkphp 5.1 去掉 .html 后缀
thinkphp 5.1 去掉 .html 后缀
- 【故障公告】docker swarm 集群问题造成新版博客后台故障
非常抱歉,今天下午 16:55~17:05 左右,由于 docker swarm 集群的突发不稳定问题造成新版博客后台(目前处于灰度发布阶段)无法正常使用,由此给您带来麻烦,请您谅解. 出故障期时,新 ...
- linux后台运行程序--nobup
用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 描述:nohup 命令运行由 Command 参数和任何相关的 Arg 参数指定的命令,忽略所有挂断 ...
- Jmeter---第一天配置中文环境、安装jmeter插件
一:安装就不在赘述,百度有很多优秀的文章.接下来开始我自己的学习笔记 二:设置JMETER,切换中文环境. 首先打开jmeter的安装目录,找到bin文件目录中的jmeter.propertie 打开 ...
- python3快速入门教程错误和异常
Python 中(至少)有两种错误:语法错误(syntax errors)和异常(exceptions). 语法错误 语法错误又称作解析错误: >>> while True prin ...
- 一文彻底搞懂CAS实现原理 & 深入到CPU指令
本文导读: 前言 如何保障线程安全 CAS原理剖析 CPU如何保证原子操作 解密CAS底层指令 小结 朋友,文章优先发布公众号,如果你愿意,可否扫文末二维码关注下? 前言 日常编码过程中,基本不会直接 ...
- 2019牛客暑期多校训练营(第九场) E All men are brothers
传送门 知识点:并查集+组合数学 并查集合并操作可以理解为使得两个集合的人互相成为朋友,也就是两个集合并在了一起,答案是要求从所有人中挑出四个互相不是朋友的四个人,比较基础的组合数学知识,但因为每个集 ...
- MySQL(学生表、教师表、课程表、成绩表)多表查询
1.表架构 student(sid,sname,sage,ssex) 学生表 course(cid,cname,tid) 课程表 sC(sid,cid,score) 成绩表 teacher(tid,t ...