边框:

盒子圆角: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. nyoj 845-无主之地1 (struct)

    845-无主之地1 内存限制:64MB 时间限制:1000ms 特判: No 通过数:8 提交数:16 难度:0 题目描述: 子晓最近在玩无主之地1,他对这个游戏的评价不错,结合了FPS与RPG元素, ...

  2. 【评测机】评测时报错cc1plus: fatal error: /xx/xx/main.cpp: Permission denied compilation terminated.的解决方法

    事情是这亚子发生的,原本建立评测机的时候就出现过这个问题,但莫名其妙就解决了. 报错的文件路径是位于docker内的,所以本质上这个错误是docker内的没有权限执行相关文件. 原因是centos7中 ...

  3. .NET进阶篇06-async异步、thread多线程3

    知识需要不断积累.总结和沉淀,思考和写作是成长的催化剂 梯子 一.任务Task1.启动任务2.阻塞延续3.任务层次结构4.枚举参数5.任务取消6.任务结果7.异常二.并行Parallel1.Paral ...

  4. [FPGA]浅谈LCD1602字符型液晶显示器(Verilog)

    目录 概述 LCD1602 LCD1602是什么? LCD1602的管脚 RS_数据/命令选择 E_使能 D0-D7 LCD1602有个DDRAM LCD1602还有个CGROM 指令集 清屏 进入模 ...

  5. VLAN配置及Trunk接口配置

    实验拓扑 1.检验连通性,PC2 ping PC3,PC2 ping PC4 ,都能ping 通 2.创建vlan 3.配置access接口 在S1上配置E0/0/2为vlan10和E0/0/3为vl ...

  6. 微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法

    因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了.我的处理办法就是在键盘弹起和消失的时候,让页 ...

  7. 2019-10-31:渗透测试,基础学习,mongodb注入学习

    mongodb命令删除文档,db.集合名.remove({键:值})更新文档,db.集合名.update({被更新的对象},{$set:{要更新的内容}}),默认只更新检测到的第一条文档更新全部匹配到 ...

  8. 【Luogu P2515】软件安装

    Luogu P2515 这道题的题面与P2146有点像.一些不同地方就是P2146是无环的,这题是有环的. 很显然,如果有几个软件的依赖关系形成环,那么这几个软件就可以被看成是一个大软件,其价值和空间 ...

  9. SpringMVC 前端传递list到后台

    ---恢复内容开始--- 1.前端获取传入后台的list 2.ajax写法: $.ajax({ type: 'post', url: url, async:false, dataType:" ...

  10. 批量更新Linux文件后缀名

    #!/bin/bash#Create_Time 2019-08-06#use: small_wei #查找并,批量修改文件后缀 #后缀为 .txt 修改为 .log find /opt -name & ...