CSS3-选择器+文字+边框+背景+颜色+渐变

文章目录

1 、介绍
- CSS3的主要新特性：
- CSS3的属性前缀
- - 1）主流浏览器内核
  - 2）厂商前缀
2、CSS3选择器
- 1）属性选择器
- 2）结构性伪类
- - ①:root 匹配HTML标签,与body选择器效果一样
  - ②子元素选择器:匹配父元素中连续的子元素
  - ③nth-of-type类：用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况
  - ④其他
- 3）目标伪类
- 4）UI元素状态伪类
- 5）否定伪类
- 6）通用兄弟元素选择器
3.CSS3文本
- 1）文本阴影（主流浏览器都支持，（IE9以上支持））
- 2）文本自动换行（主流浏览器都支持）
- 3）单词拆分（主流浏览器都支持）
- 4）文本拆分（所有主流浏览器都不支持）
- 5）文本溢出
- - a)单行文本溢出（重要）
  - b)多行文本溢出（IE9以下的版本不支持，主要是谷歌支持）
4.CSS3边框
- 1）圆角边框（掌握）
- 2）边框阴影（IE9以上支持）
- 3）边框图片(IE11.0及以后版本支持）
5.CSS3背景
- 1）多重背景
- 2）background-size：设定背景图像的尺寸。
- 3）background-origin：指定背景图像的位置区域。
- 4）background-clip：设定背景的绘制区域。
- 5）渐变背景
6.CSS3颜色函数
- 1）RGBA
- 2）HSL
- 3）HSLA
7.opacity
8.CSS3渐变
- 1）线性渐变
- 2）径向渐变(沿半径方向渐变）
- 3）文字渐变
9.box-sizing

1 、介绍

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，它是对CSS的一个扩展。2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模
块。

CSS3的主要新特性：

1）选择器
2）阴影
3）形状转换（2D <-> 3D）
4）变形
5）动画（过渡动画、帧动画）
6）边框
7）多重背景
8）反射
9）文字
10）颜色函数（rgba/hsl/hsla）
11）滤镜（filter）
12）弹性布局
13）多列布局
14）栅格布局
15）盒模型
16）Web字体
17）媒体查询

CSS3的属性前缀

CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性。

1）主流浏览器内核

Trident内核：主要代表为IE浏览器
Gecko内核：主要代表为Firefox
Blink内核（是Webkit的一个分支）：主要代表为Chrome和Opera
Webkit内核：产要代表为Chrome和Safari
目前国内的浏览器大多都是双核的（IE内核+Chrome内核）

2）厂商前缀

IE： -ms-
Chrome&Safari： -webkit-
FireFox： -moz-
Opera： -o-

2、CSS3选择器

丰富选择的目的：在标签中减少class和id属性的使用。

1）属性选择器

[属性名]

/* 匹配具有class属性的元素 */
p[class]{color: #ff0000;
}

[属性名=属性值]

/* 匹配具有class属性且属性值为content的元素 */
p[class=content]{color: #ff0000;
}

[属性名^=属性值]

/* 匹配具有class属性且值以content开头的元素 */
p[class^=content]{color: #ff0000;
}

[属性名$=属性值]

/* 匹配具有class属性且值以content结尾的元素 */
p[class$=content]{color: #ff0000;
}

[属性名*=属性值]

/* 匹配具有class属性且值含有content的元素 ，div用~，p标签用**/
p[class*=p]{color: #ff0000;
}
div[class~=xxx]{color: #0000FF;
}

2）结构性伪类

①:root 匹配HTML标签,与body选择器效果一样

:root

/* :root{background: #BC8F8F;
}*/
body{background: #BC8F8F;
}

②子元素选择器:匹配父元素中连续的子元素

:first-child 匹配父元素中第一个子元素

p:first-child{background: #00FF00;
}

:last-child 匹配父元素中最后一个子元素
:nth-child(n) 匹配父元素中第n个子元素
:nth-last-child(n) 匹配父元素中倒数第n个子元素

③nth-of-type类：用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况

:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素

/* 找的是p标签中的第三个兄弟p标签，如果第三个不是P标签，将跳过，继续向下寻找，直到找到为止 */
p:nth-of-type(3){color: #005FBD;
}

:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素

/* 找的是p标签中倒数第二个兄弟p标签，如果不是P标签，将跳过，继续向前寻找，直到找到为止 */p:nth-last-of-type(2){color: #8B008B;
}

④其他

:only-child 父元素中仅有一个子元素

p:only-child{width: 100px;height: 100px;background-color: #888888;
} /* 查找的是父元素中仅有一个标签且为p标签 */

:only-of-type 父元素中仅有一个兄弟元素

p:only-of-type{width: 100px;height: 100px;background-color: #FF0000;
}/* 父元素中只有一个p标签，但是有其他兄弟标签 */

:empty没有元素，包括文本元素，既查找空元素

3）目标伪类

:target 匹配相关URL指向的元素

<a href="#jump1">跳转1</a>
<a href="#jump2">跳转2</a>
<a href="#jump3">跳转3</a>
<p id="jump1">这是段落1的内容</p><!-- id="jump1"这里的id表示设置了1个锚点，进行页内跳转 -->
<p id="jump2">这是段落2的内容</p>
<p id="jump3">这是段落3的内容</p>

p:target{color: #FF0000;
}

4）UI元素状态伪类

:checked 匹配所有用户界面（form表单）中处于选中状态的元素，(只在Opera浏览器中有效)
:disabled 匹配所有用户界面（form表单）中处于不可用状态的元素，含有disable的元素会被选中
:enabled 匹配所有用户界面（form表单）中处于可用状态的元素，不含有disable的元素会被选中
:selection 高亮显示被选中的文本，注意必须使用双冒号

<form action=""><input type="text" disabled><br><input type="text"><br><input type="text"><br><input type="checkbox" name="face" checked>党员<input type="checkbox" name="face" >团员<input type="checkbox" name="face" >无党派人士<br><select><option >大前端开发</option><option selected>大数据开发</option><option >UI设计</option></select>
</form>

input:disabled{background: #005FBD;
}
input:enabled{background: #F4FF57;
}
input:checked:{/* :checked只在opera中有效 */border: 1px solid #0000FF;
}
::selection{/* 高亮显示被选中的文本 */color: #00FF00;
}

5）否定伪类

:not() 匹配所有不匹配简单选择符s的元素

<div class="con"><p>11</p><p>22</p><span>span</span>
</div>

p{height: 10px;
}
.con :not(p){/* 匹配所有不是p标签的标签 */color: #f00;background-color: #000000;
}

6）通用兄弟元素选择器

E~F 匹配E元素之后的F元素

<div class="text"><div class="div1">div1</div><div class="div2">div2</div><strong>strong</strong><div class="div3">div3</div>
</div>

.div1~ .div3{color: #0000FF;
}

3.CSS3文本

1）文本阴影（主流浏览器都支持，（IE9以上支持））

text-shadow: 水平偏移距离垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];

<h2>阴影测试</h2>

h2{text-shadow: 1px 1px 1px #fff;color: #0000FF;background: #000000;font-size: 56px;
}

2）文本自动换行（主流浏览器都支持）

word-wrap: normal（断点字换行）|break-word（在长单词或者URL地址内部进行换行）;

.z p{width: 100px;height: 510px;word-wrap: normal;background-color: #0000FF;
}
.x p{width: 100px;height: 510px;word-wrap: break-word;background-color: #0000FF;
}

3）单词拆分（主流浏览器都支持）

word-break:

normal(使用浏览器默认换行规则)
break-all（允许在单词内换行）
keep-all;（只能在半角空格或连字符处换行）

<p>dddddddddddddddddddddddd ddddddddddd dddddd</p>
<p class="x1">dddddddddddddddddddddddd ddddddddddd dddddd</p>
<p class="x2">dddddddddddddddddddddddd ddddddddddd dddddd</p>
<p class="x3">dddddddddddddddddddddddd ddddddddddd dddddd</p>

p{width: 100px;height: 510px;border:1px solid #452200;
}
.x1{word-break: normal;
}
.x2{word-break: break-all;
}
.x3{word-break: keep-all;
}

4）文本拆分（所有主流浏览器都不支持）

text-wrap: normal|none|unrestricted|suppress;

5）文本溢出

a)单行文本溢出（重要）

text-overflow: clip|ellipsis|string;

处理文字溢出样式：
width: px/%/em/rem…;
white-space: nowrap; /* 为允许折行 /
-ms-text-overflow: ellipsis; / 处理IE兼容 */
text-overflow: ellipsis;
overflow: hidden;

p{width: 300px;white-space: nowrap; /* 为允许折行 */border: 1px solid #000;
}
/* 单行文本溢出 */
.p2{-ms-text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;
}
.p3{-ms-text-overflow: clip;text-overflow: clip;overflow: hidden;
}

b)多行文本溢出（IE9以下的版本不支持，主要是谷歌支持）

width: px/%/em/rem…;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 行数;
overflow: hidden;

/* 多行文本溢出 */
.p4{width: 300px;white-space: normal;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
}

4.CSS3边框

1）圆角边框（掌握）

border-radius: 1-4 length|% / 1-4 length|%;

四个方位的词：top-left/top-right/bottom-left/bottom-right

/* 1）圆角边框 */
.boeders {width: 200px;height: 200px;border: 1px solid #000000;margin: 100px auto;/* -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; *//* 第一个参数对应的是左上和右下，第二个参数对应右上和左下 */
/*  -webkit-border-radius: 10px 20px;-moz-border-radius: 10px 20px;border-radius: 10px 20px; *//* 第一个参数对应的是左上，第二个参数对应右上和左下 ，第三个参数对应的是右下*/
/*  -webkit-border-radius: 10px 20px 30px;-moz-border-radius: 10px 20px 30px;border-radius: 10px 20px 30px;*//* 参数对应的是左上，右上 ，右下，左下*//* -webkit-border-radius: 10px 20px 30px 40px;-moz-border-radius: 10px 20px 30px 40px;border-radius: 10px 20px 30px 40px; *//* -webkit-border-radius: 20%;-moz-border-radius: 20%;border-radius: 20%; *//* 左上角 *//* -webkit-border-top-left-radius: 20%;-moz-border-top-left-radius: 20%;border-top-left-radius: 20px; *//* 右上角 左下角 *//* -webkit-border-top-right-radius: 20%;-moz-border-top-right-radius: 20%;border-top-right-radius: 20px;-webkit-border-bottom-left-radius: 20%;-moz-border-bottom-left-radius: 20%;border-bottom-left-radius: 20px; *//* 圆 */-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

2）边框阴影（IE9以上支持）

box-shadow: 水平偏移距离垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];

.box{width: 200px;height: 200px;margin: 0 auto;background-color: #008000;-webkit-box-shadow:inset  1px 1px 5px #FF0000 ;-moz-box-shadow: inset  1px 1px 5px #FF0000 ;box-shadow: inset  1px 1px 5px #FF0000 ;
}

3）边框图片(IE11.0及以后版本支持）

border-image：图片向内偏移距离宽度图像区域超出边框的距离重复效果;

div {margin: 0 auto;
}
.zzz .div1{width: 200px;height: 200px;margin-top: 50px;background-color: #005FBD;border: 10px solid transparent;-webkit-border-image: url(../img/微信图片_20190720165827.jpg) 10 round;-moz-border-image: url(../img/微信图片_20190720165827.jpg) 10 round;-o-border-image: url(../img/微信图片_20190720165827.jpg) 10 round;border-image: url(../img/微信图片_20190720165827.jpg) 10 round;
}
.zzz .div2{width: 200px;height: 200px;margin-top: 50px;background-color: #88180F;border: 10px solid transparent;-webkit-border-image: url(../img/微信图片_20190720165827.jpg) 10 repeat;-moz-border-image: url(../img/微信图片_20190720165827.jpg) 10 repeat;-o-border-image: url(../img/微信图片_20190720165827.jpg) 10 repeat;border-image: url(../img/微信图片_20190720165827.jpg) 10 repeat;
}
.zzz .div3{width: 200px;height: 200px;margin-top: 50px;background-color: #00FF00;border: 10px solid transparent;-webkit-border-image: url(../img/微信图片_20190720165827.jpg) 10 stretch;-moz-border-image: url(../img/微信图片_20190720165827.jpg) 10 stretch;-o-border-image: url(../img/微信图片_20190720165827.jpg) 10 stretch;border-image: url(../img/微信图片_20190720165827.jpg) 10 stretch;
}

重复效果：round/strech/repeat

5.CSS3背景

1）多重背景

background: 背景色背景图片平铺方式位置,背景色背景图片平铺方式位置,…

2）background-size：设定背景图像的尺寸。

background-size: 固定长度|百分比值|cover|contain;

3）background-origin：指定背景图像的位置区域。

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

4）background-clip：设定背景的绘制区域。

background-clip: border-box|padding-box|content-box;

5）渐变背景

background-image: 线性渐变｜径向渐变

div{width: 500px;height: 500px;margin: 100px auto;/* background: url(images/ufo.png) no-repeat 50% 100%,url(images/stars.png) no-repeat 0 0,url(images/sky.png) no-repeat 0 0; */  /*效果等同于下面三条*/background-image: url(images/ufo.png),url(images/stars.png),url(images/sky.png);background-position: 50% 100% ,0 0, 0 0;background-repeat: no-repeat;
}

6.CSS3颜色函数

1）RGBA

rgba(r,g,b,a)

r:红色取值范围：0-255/0-100%
g:绿色取值范围：0-255/0-100%
b:蓝色取值范围：0-255/0-100%
a:不透明度取值范围：0-1的一个小数

2）HSL

hsl(h,s,l)

h:色调取值范围：0-360
s:饱和度取值范围：0-100%
l:亮度取值范围：0-100%

3）HSLA

hsla(h,s,l,a)

h:色调取值范围：0-360
s:饱和度取值范围：0-100%
l:亮度取值范围：0-100%
a:不透明度取值范围：0-1的一个小数

7.opacity

调整元素的不透明度，大多数情况下用于做元素的遮罩效果。取值范围：0-1的一个小数
IE8及8以下版本不支持opacity，处理兼容的方式，再添加一行代码来处理不透明度：
filter:alpha(opacity=数值）数值的范围：0-100

8.CSS3渐变

渐变主要用来设置背景或制作三维图。

1）线性渐变

background: linear-gradient(方向或角度, 颜色1 百分比, 颜色2 百分比, …);
方向：

to left:从右向左渐变
to right:从左向右渐变
to top:从下向上渐变
to bottom:从上向下渐变
to top left:从右下角向左上角渐变
to top right:从左下角向右上角渐变
to bottom left:从右上角向左下角渐变
to bottom right:从左上角向右下角渐变

角度：

比如45度角，应该表示为：45deg

颜色取值：

表示颜色的单词
16进制颜色
表示颜色的函数（rgb()/rgba()/hsl()/hsla()…)

2）径向渐变(沿半径方向渐变）

background: radial-gradient(形状渐变大小 at 位置,颜色1 百分比, …, 颜色n 百分比);
形状：

ellipse:椭圆径向渐变（默认）
circle:圆径向渐变

渐变大小：

farthest-corner:渐变的半径长度为从圆心到离圆心最远的角（默认）
closest-side:渐变的半径长度为从圆心到离圆心最近的边
closest-corner:渐变的半径长度为从圆心到离圆心最近的角
farthest-side:渐变的半径长度为从圆心到离圆心最远的边

位置：

center:设置圆心在中心位置（默认）
top:设置圆心在顶部位置
bottom:设置圆心在底部位置
at 圆心橫坐标圆心纵坐标: 设定圆心的位置在指定的（橫坐标，纵坐标）处

3）文字渐变

background-image: 线性渐变或径向渐变;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

9.box-sizing

允许你以某种方式定义某些元素，以适应指定的区域。
box-sizing: content-box/border-box （火狐和谷歌低版本需要厂商前缀）