CSS3基础知识(一)
结构选择器
:nth-child(n) 第几个元素 从1开始设置
:nth-child(2n) 偶数元素 从0开始设置
:nth-child(2n+1) 奇数元素
:nth-of-type(n)
:first-child ->nth-child(1)
:first-of-type ->nth-of-type(1)
:last-child
:last-of-type
:only-child 仅有一个子元素
:only-of-type 同种类型的子元素只有一个
:empty
否定选择器
:not()
属性选择器
E[attr=val]
E[attr|=val] 只能等于val 或只能以val-开头
E[attr*=val] 包含val字符串
E[attr~=val] 属性值有多个,其中有一个是val
E[attr^=val] 以val开头
E[attr$=val] 以val结尾
标伪类选择器
:target 用来匹配url指向的目标元素
存在url指向该匹配元素时,样式效果才会生效
伪元素
: first-line 匹配第一行文本
: first-letter 匹配第一首字符
: before 和 : after DOM元素前后插入额外的内容
圆角border-radius
border-radius: 1-4个数字 / 1-4个数字
- 前面是水平半径,后面是垂直半径
- 四个数字方向分别是左上 右上 右下 左下
- 不给“/”则水平半径和垂直半径一样
- border-radius: 10px/5px;
- border-radius:60px 40px 30px 20px /30px 20px 10px 5px;
- 例子 : 圆 椭圆 半圆 扇形
线性渐变
linear-gradient
- linear-gradient([ || ,]? , …)
- 只能用在背景上
- 颜色是沿着一条直线轴变化
- 参数
- 起点:从什么方向开始渐变
》left、top、left top - 角度:从什么角度开始渐变
》xxx deg的形式 - 点:渐变点的颜色和位置
》red 50%,位置可选 - 重复线性渐变
径向渐变
- radial-gradient([[
<shape>
||<size>
][at <position>]
?,| at<position>
,]?<color-stop>
[,<color-stop>
]+); - 从“一个点”向多方向颜色渐变
- shape形状 : ellipse、circle 或设置水平半径,垂直半径
- size:渐变的大小,即渐变到哪里停止,有如下关键词:
- closest-side:最近边; farthest-side:最远边;
- closest-corner:最近角; farthest-corner:最远角 (默认值)
- position :关键词|数值|百分比
- 重复的径向渐变
背景background
background-origin
padding-box 从padding区域显示
border-box 从border区域显示
content-box 从content区域显示
background-clip
padding-box 从padding区域向外裁剪
border-box 从border区域往外裁剪
content-box 从content区域往外裁剪
text 文本裁剪
background-size
100% 100% 百分比
10px 10px 数值
contain 按原始比例收缩,背景图显示完整,但不一定铺满整个容器
cover 按原始比例收缩,背景图可能显示不完整,但铺满整个容器
background-attachment
背景图片是滚动的还是固定的 fixed(固定的) 默认是滚动的
盒子阴影
box-shadow
: h v blur spread color inset;
h :水平方向偏移
v : 垂直方向偏移
blur : 模糊半径
spread : 扩展半径
color : 颜色
inset :加上这个表示内阴影 默认是外阴影
文本阴影
text-shadow
: x y blur color- x轴偏移 y轴偏移 模糊度 颜色
多层阴影制作文字立体效果 ,设置多种颜色,中间以逗号隔开
- 文字添加边框
text-stroke
: 2px blue- 通过设定1px的透明边框,可以让文字变得平滑
- 颜色设成透明能创建镂空字体
滤镜
-webkit-filter: normal; 正常
-webkit-filter: grayscale(1); 灰度,取值范围0-1
-webkit-filter: brightness(0. 亮度,取值范围0-1
-webkit-filter: invert(1); 反色5); ,取值范围0-1, 0为原图,1为彻底反色之后
-webkit-filter: sepia(0.5); 叠加褐色,取值范围0-1
-webkit-filter: hue-rotate(30deg); 色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红)此处为叠加黄色滤镜
-webkit-filter: saturate(4); 饱和度,取值范围0 ~ *, 0为无饱和度,1为原图,值越高饱和度越大
-webkit-filter: contrast(2); 对比度,取值范围0 ~ *, 0为无对比度(灰色),1为原图,值越高对比度越大
-webkit-filter: opacity(0.8); 透明度,取值范围0 ~ 1, 0为全透明,1为原图
-webkit-filter: drop-shadow(0 0 20px red); 阴影
遮罩
mask-image
mask-position
mask-repeat
转载于:https://www.cnblogs.com/Juphy/p/7107545.html
CSS3基础知识(一)相关推荐
- CSS3基础知识及详情
CSS3基础知识及详情 什么是CSS3 CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能.目前主流浏览器chrome.safari.firefox.opera ...
- CSS学习笔记 01、CSS3基础知识学习
文章目录 前言 CSS3基本了解 如何学习? 一.什么是CSS 1.1.发展史 1.2.快速入门(三种引用方式) 扩展:外部样式两种写法 二.选择器 2.1.基本选择器(标签.类.id) 2.2.元素 ...
- html5 css3基础知识详解
如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷. Html4 ...
- css3基础知识总结
简言:本文主要以简要的方式记录CSS3的属性.语法.部分用法,以大家共同学习后日后巩固查询为目的,没事可以多翻阅,可以在一些特定样式的处理以及代码优化有所帮助.对前端初学者的基础学习和有一定能力前端开 ...
- HTML5及CSS3基础知识(持续更新)
一.HTML5基础 1.HTML概述 HTML: Hyper Text Markup Language 超文本标记语言 超文本: 比普通文本功能更加强大,可以添加各种样式 标记语言: 通过一组标签.来 ...
- html+css3基础知识部分详记
1.VsCode操作 1)语言切换 2)"文件"--首选项--"设置" 3)插件:view in browser open in browser 4)快捷键 a ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
- CSS3 元素基础知识
CSS3 元素基础知识 元素宽高特点 元素类型转换 元素显隐 px像素 em单位 rem单位 百分比单位 颜色名和16进制颜色值 rgb和rgba颜色值 元素宽高特点 块级元素 可以设置宽高 不能和其 ...
- aspx网页背景图片设置代码_Vue+CSS3制作双螺旋DNA动画:代码详解和基础知识复习
1 效果: 2 知识点: ======= 2.1 html的基础知识. 2.2 css3的基础知识. 2.3 vue的基础知识. 2.4 代码讲解非常清楚,小白看了都会. 3 html骨架: ==== ...
最新文章
- R语言基于可视化进行多变量离群(Mulltivariate outliers)点检测识别:散点图可视化多变量离群点、模型平滑多变量异常检测、使用平行坐标图查看钻石数据集中的异常值
- HDU 2066 一个人的旅行
- Sql Server 2008将数据库导出sql脚本并导出数据
- 如何在php中插入数据并修改,php怎么同时向2张表里插入数据
- NetBeans与myeclipse区别
- Utility.cs
- 笨办法学python在线阅读_『笨办法』学Python 3
- poj3694 Network 求桥边个数[tarjan + LCA]
- Zint生成多种条码及二维码
- windows下C++内存碎片的测试
- 响应式开发(六)-----Bootstrap CSS----------Bootstrap文本排版
- Android 圆形头像的两种实现方式
- 人工智能一大技术:强化学习(RL)
- 拼多多2018校招—Anniversary
- i.MX arm 3.12.28 Kernel Configuration
- 华为服务器 26块硬盘,产品推广—华为服务器推荐
- 【观察】软博会平行论坛:数据中心和边缘计算绿色创新,为北京软件产业发展护航...
- 中断和异常 in 操作系统【操作系统学习笔记】
- 上海互盾信息科技有限公司:百学须先立志
- Mastering Sublime Text 下载
热门文章
- Java Web项目,Android和微信小程序的初始页面配置
- JavaScript的语音识别
- wex5 php开发,WeX5平台PHP开发 使用说明文档
- vs2013 matlab 教程,Matlab 2016a和VS2013混合Dll编程步骤总结
- php开发者大会报名,2017 PHP 全球开发者大会
- java 枚举使用例子_Java枚举详解及使用实例(涵盖了所有典型用法)
- java写入txt文件 不替换_java非覆盖写入文件及在输出文本中换行
- Flask和mysql多线程_数据库连接池Flask-SQLAlchemy中多线程安全的问题
- sarscape 将dem文件转化成stl_STL源码剖析 阅读笔记(一)介绍
- java找出一组数据缺少最小数组_Java获取一维数组的最小值实现方法