css3(持续更新...)

时间 2019-12-13

标签 css3 css 持续更新栏目 CSS 繁體版

原文原文链接

一、浏览器支持： chrome、safari、firefox、opera、360、IE10之后。

二、浏览器前缀：

-webkit(chrome和safari)

-moz(firefox)

-ms(IE)

-o(opera)

三、圆角效果

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

四、阴影效果box-shadow

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

若是添加多个阴影，只需用逗号隔开便可。

.box_shadow{
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

}

阴影模糊半径与阴影扩展半径的区别

阴影模糊半径：此参数可选，其值只能是为正值，若是其值为0时，表示阴影不具备模糊效果，其值越大阴影的边缘就越模糊；css

阴影扩展半径：此参数可选，其值能够是正负值，若是值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；html

X轴偏移量和Y轴偏移量值能够设置为负数

五、为边框应用图片border-image

Round 参数：Round能够理解为圆满的铺满。为了实现圆满因此会压缩（或拉伸）；

#border-image {

width:170px;

height:170px;

border:70px solid;

border-image:url(borderimg.png) 70 round;

}

Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。css3

border-image:url(borderimg.png) 70 stretch

六、RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来获得各式各样的颜色。RGBA是在RGB的基础上增长了控制alpha透明度的参数。web

语法：chrome

color：rgba(R,G,B,A)

以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并不是全部浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

七、渐变色彩

线性渐变：

八、text-overflow与word-wrap

text-overflow用来设置是否使用一个 省略标记（...）标示对象内文本的溢出。

text-overflow只是用来讲明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码以下：浏览器

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

同时， word-wrap也能够用来设置 文本行为，当前行超过指定容器的边界时是否断开转行。

九、嵌入字体@font-face

@font-face可以加载服务器端的字体文件，让浏览器端能够显示用户电脑里没有安装的字体。服务器

语法：函数

@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

这样设置以后，就能够像使用普通字体同样在 （font-*）中设置字体样式。

十、文本阴影text-shadow

text-shadow能够用来设置文本的阴影效果。工具

语法：布局

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；

Y-Offset：是指阴影的垂直偏移距离，若是其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，若是值越大，阴影越模糊，反之阴影越清晰，若是不须要阴影模糊能够将Blur值设置为0；

Color：是指阴影的颜色，其可使用rgba色。

十一、background-origin

设置元素背景图片的原始起始位置。

语法：

background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，仍是 内边距（默认值），或者是 内容区域开始显示。

十二、background-alip

用来将背景图片作适当的裁剪以适应实际须要。

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从 边框、或 内填充，或者 内容区域向外裁剪背景。 no-clip表示不裁切，和 参数border-box显示一样的效果。 backgroud-clip默认值为 border-box。

1三、background-size:auto|<长度值>|<百分比>|cover|contain

一、auto：默认值，不改变背景图片的原始高度和宽度；

二、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其做为图片宽度值来等比缩放；

三、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘之前面百分比得出的数值，当设置一个值时同上；

四、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

五、contain：容纳，即将背景图片等比缩放至 某一边紧贴容器边缘为止。

1四、multiple backgrounds

多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的屡次叠加，缩写时为用逗号隔开的每组值；用分解写法时，若是有多个背景图片，而其余属性只有一个（例如background-repeat只有一个），代表全部背景图片应用该属性值。

语法缩写以下：

1五、属性选择器

新增了3个属性选择器，使得属性选择器有了 通配符的概念。

1六、结构性伪类选择器——root

:root选择器，从字面上咱们就能够很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

结构性伪类选择器——not

:not选择器称为 否认选择器，和jQuery中的:not选择器如出一辙， 能够选择除某个元素以外的全部元素。

结构性伪类选择器——empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

结构性伪类选择器——target

:target选择器称为目标选择器，用来匹配文档(页面)的 url的某个标志符的目标元素。咱们

结构性伪类选择器——first-chirld

“:first-child”选择器表示的是 选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是 子元素，而不是后代元素。

结构性伪类选择器——last-chirld

“:last-child”选择器与“:first-child”选择器做用相似，不一样的是“:last-child”选择器选择的是元素的最后一个子元素。例如，须要改变的是列表中的最后一个“li”的背景色，就可使用这个选择器，

ul>li:last-child{background:blue;}

结构性伪类选择器——nth-child(n)

“:nth-child(n)”选择器用来定位某个 父元素的 一个或多个特定的子元素。其中“n”是其参数，并且能够是整数值(1,2,3,4)，也能够是表达式(2n+一、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。以下表所示：

结构性伪类选择器——nth-last-child（n）

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器很是的类似，只是这里多了一个“last”，所起的做用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

1七、first-of-type选择器

“:first-of-type”选择器相似于“:first-child”选择器，不一样之处就是 指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

1八、nth-of-type(n)选择器

“ :nth-of-type(n)”选择器和“ :nth-child(n)”选择器很是相似，不一样的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不仅仅是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是很是方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也同样，能够是具体的整数，也能够是 表达式，还能够是 关键词。

1九、last-of-type选择器

“ :last-of-type”选择器和“ :first-of-type”选择器功能是同样的，不一样的是他选择是父元素下的某个类型的 最后一个子元素。

20、nth-last-of-type(n)选择器

“ :nth-last-of-type(n)”选择器和“ :nth-of-type(n)”选择器是同样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，并且它的使用方法相似于上节中介绍的“ :nth-last-child(n)”选择器同样。

2一、only-child选择器

“ :only-child”选择器选择的是父元素中只有一个子元素，并且只有惟一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，并且是一个 惟一的子元素。

2二、only-of-type选择器

“:only-of-type”选择器用来选择一个元素是它的父元素的惟一一个相同类型的子元素。这样说或许不太好理解，换一种说法。 “:only-of-type”是表示一个元素他有不少个子元素，而其中只有一种类型的子元素是惟一的，使用“:only-of-type”选择器就能够选中这个元素中的惟一一个类型子元素。

2三、:enabled选择器

在Web的表单中，有些表单元素有可用（ “:enabled”）和不可用（“ :disabled”）状态，好比输入框，密码框，复选框等。在默认状况之下，这些表单元素都处在可用状态。那么咱们能够经过伪选择器“ :enabled”对这些表单元素设置样式。

:disabled选择器

:checked

::selection选择器

“ ::selection”伪元素是用来匹配 突出显示的文本(用鼠标选择文本时的文本)。

:read-only选择器

“ :read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“ readonly=’readonly’”

:read-write选择器

“ :read-write”选择器恰好与“ :read-only”选择器相反，主要用来指定当元素处于 非只读状态时的样式。

::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

2四、变形——旋转 rotate()

旋转rotate()函数经过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操做，设置一个角度值，用来指定旋转的幅度。若是这个值为正值，元素相对原点中心 顺时针旋转；若是这个值为负值，元素相对原点中心 逆时针旋转。

一、使用CSS3Grid布局的话，咱们只需这样写：

body{columns:3;column-gap:0.5in;}

img{float:pagetopright;width:3gr;}

css3更规范化

其中，body部分声明页面为3栏，栏间距为0.5英寸；

img中float属性指明图片浮动位置为页面的右上角，而宽度为3个栏宽。

只需这样两行CSS，就能够实现这个复杂布局。

二、Flexbox(伸缩布局盒)

Flexbox 由 伸缩容器 和 伸缩项目 组成。经过设置元素的 display 属性为 flex 或 inline-flex 能够获得一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。

Flexbox一般能让咱们更好的操做他的子元素布局，例如：

1. 若是元素容器没有足够的空间，咱们无需计算每一个元素的宽度，就能够设置他们在同一行；
2. 能够快速让他们布局在一列；
3. 能够方便让他们对齐容器的左、右、中间等；
4. 无需修改结构就能够改变他们的显示顺序；
5. 若是元素容器设置百分比和视窗大小改变，不用担忧未指定元素的确切宽度而破坏布局，由于容器中的每一个子元素均可以自动分配容器的宽度或高度的比例。

三、CSS3 Maker

这款工具很是强大，可在线演示渐变、阴影、旋转、动画等很是多的效果，并生成对应效果的代码，

CSS3 Generator

很是不错的各类 CSS3 代码生成器，支持圆角、渐变、旋转和阴影等众多特性，带预览效果。

CSS3 Please

帅且酷的一款 CSS3 工具，可即时在线修改代码并预览效果，还有详细的浏览器兼容状况。