CSS3新特性与选择器

来源：互联网发布：生产数据化管理编辑：程序博客网时间：2024/06/11 01:33

圆角效果：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */

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

阴影：

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

阴影颜色：默认黑色; 投影方式：inset时为内部阴影，省略为外部阴影

为边框应用图片：

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

RGBA颜色：

background-color:rgba(100,120,60,0.5);

最后的0.5代码透明度

渐变色彩：

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

线性渐变：linear-gradient(to left, red, orange); to left为渐变方向从右到左；to top;to right;to bottom;to top left;to top right 颜色可多个分别为从起始到终止的色彩。

溢出省略：

text-overflow:ellipsis; 溢出文字以省略号出现，需要下面三个属性同时使用

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

嵌入字体：

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

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

使用时：font-family:字体名称

文本阴影text-shadow：

text-shadow: X-Offset(水平偏移) Y-Offset(垂直偏移) blur（阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰） color;

background-origin设置元素背景图片的原始起始位置：

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

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

background-clip用来将背景图片做适当的裁剪：

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

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

background-size设置背景图片的大小

以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。background-size: auto | <长度值> | <百分比> | cover | contain

CSS3选择器：

属性选择器：E[attr^="val"] 属性attr值以val开头的E元素 E[attr$="val"] 属性attr值以val结尾的E元素 E[attr*="val"] 属性attr值包含val的E元素
结构性伪类选择器
“:root”选择器等同于<html>元素
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。input:not([type="submit"])
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 p:empty
“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素
:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。
“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。如：.wrapper > p:first-of-type
“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。如：.wrapper > p:nth-of-type(2n)
“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始
“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。
:enabled选择器 :disabled选择器选择可用的表单元素
:checked选择器

0 0