016-CSS3新特性

最新推荐文章于 2024-02-21 11:33:08 发布

程序员buddha

最新推荐文章于 2024-02-21 11:33:08 发布

阅读量102

点赞数

分类专栏：实战前端

本文链接：https://blog.csdn.net/rulaixiong/article/details/109443199

版权

实战前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、CSS3选择器

（一）、CSS3介绍

CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准

CSS3 被划分为模块，其中最重要的 CSS3 模块包括

选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面

（二）、属性选择器

E[attribute^=‘val’]

E[attribute^=‘val’]：选择具有att属性且属性值为以val开头的字符串的E元素

/* 匹配具有class属性且属性值以a为开头的div元素  */
div[class^="a"] {
  border: 2px solid #000;
}

E[attribute$=‘val’]

E[attribute$=‘val’]：选择具有att属性且属性值为以val结尾的字符串的E元素

/* 匹配具有class属性且属性值以c为结尾的div元素  */
div[class$="c"] {
  border: 2px solid #000;
}

E[attribute*=‘val’]

E[attribute=‘val’]*：选择具有att属性且属性值为包含val的字符串的E元素

/* 匹配具有class属性且属性值包含b的div元素  */
div[class^="b"] {
  border: 2px solid #000;
}

（三）、伪类选择器

E:first-of-type

E:first-of-type：匹配同类型中的第一个同级兄弟元素E
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E

/* 匹配父元素的第一个为p的子元素 */
p:first-of-type {
  color: #f00;
}

E:last-of-type

E:last-of-type：匹配同类型中的最后一个同级兄弟元素E
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E

/* 匹配父元素的最后一个为p的子元素 */
p:last-of-type {
  color: #f00;
}

E:only-of-type

E:only-of-type：匹配同类型中的唯一的一个同级兄弟元素E
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置

/* 匹配父元素的唯一同类p的子元素 */
p:only-of-type {
  color: #f00;
}

E:nth-child(n)

E:nth-child(n)：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可写成：E:nth-child(2n)，使用E:nth-child(n)实现奇偶

li:nth-child(2n){color:#F00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */

E:nth-last-child(n)

E:nth-last-child(n)：匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)

p:nth-last-child(2){ 
  color:#f00;
}

E:last-child

E:last-child：匹配父元素的最后一个子元素E，假设该子元素不是E，则选择符无效
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
E:last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。与之类似的伪类还有E:first-child，只不过情况正好相反，需要它是第一个子元素

E:enabled

E:enabled：匹配用户界面上处于禁用状态的元素E

input[type="text"]:enabled {
 border: 1px solid #ccc;
 background: #eee;
 color: #ccc;
}

E:disabled

E:disabled：匹配用户界面上处于可用状态的元素E

input[type="text"]:disabled {
 border: 1px solid #ccc;
 background: #eee;
 color: #ccc;
}

E:checked

E:checked：匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

input:checked{
  background: #f00;
}

（四）、关系选择器

E~F

E~F：选择E元素后面的所有兄弟元素F

h3~p {
 color: red;
}

二、CSS3边框

（一）、CSS3的属性带有前缀?

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

现在主要流行的浏览器内核主要有

Trident内核：主要代表为IE浏览器
Gecko内核：主要代表为Firefox
Presto内核：主要代表为Opera
Webkit内核：产要代表为Chrome和Safari

这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性

Trident内核：前缀为-ms
Gecko内核：前缀为-moz
Presto内核：前缀为-o
Webkit内核：前缀为-webkit

（二）、border-radius边框圆角

border-radius：该属性允许您为元素添加圆角边框
所有合法的CSS度量值都可以使用：em、px、百分比等等

border-radius 属性中只指定一个值，那么将生成 4 个圆角
如果想要在四个角上一一指定，可以使用以下规则

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

.br50 {
 border-radius: 50%;
}

（三）、box-shadow边框阴影

box-shadow：在任意元素上添加阴影效果

语法：box-shadow 属性接受值最多由五个不同的部分组成
box-shadow: offset-x offset-y blur spread color position;
- offset-x {numebr}: 指定阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧
- offset-y {numebr}: 设置阴影垂直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方
- blur {number}：设置阴影的模糊半径，值为 0 意味着该阴影是固态而锋利的，完完全全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0
- spread {numebr}:改变阴影的大小,其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值，则缩小
- color {color}: 阴影的颜色，它可以是任意的颜色

实例

div {
  width: 300px;
  height: 500px;
  box-shadow: 5px 10px 20px 20px red;
}

（四）、border-image边框图片

border-image：属性，可以使用图片来创建边框

语法：box-image 属性接受值最多由五个不同的部分组成
border-image：source slice width outset repeat
- source {string}：用在边框的图片的路径
- slice {number}：图片边框向内偏移
- width {number}：图片边框的宽度
- outset {number}：边框图像区域超出边框的量
- repeat {string}：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

实例

div {
  border: 5px solid transparent;
  border-image: url(img/border.png) 27px rounded
}

三、CSS3背景

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制

（一）、background-size

background-size：属性指定背景图片大小

属性值
- length {numebr}：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
- percentage {numebr}：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
- cover：图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
- contain：图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

实例

div {
  background:url('images/bg.png')
  background-size: 100% 100%
}

（二）、background-image

background-image：属性设置一个元素的背景图像

属性值
- url {string}：图像的URL
- none：无图像背景会显示。这是默认
- inherit：指定背景图像应该从父元素继承

div {
 background-image: url('images/bg.png')
}

（三）、background-origin

background-Origin：属性指定了背景图像的位置区域

属性值
- padding-box：背景图像相对于内边距框来定位
- border-box: 背景图像相对于边框盒来定位
- content-box：背景图像相对于内容框来定位

实例

  background-image:url('smiley.gif');
  background-position:left;
  background-repeat:no-repeat;
  background-origin:content-box;

（四）、background-clip

background-clip：属性指定背景绘制区域

属性值
- padding-box：背景绘制在衬距方框内（剪切成衬距方框）
- border-box: 默认值。背景绘制在边框方框内（剪切成边框方框）
- content-box：背景绘制在内容方框内（剪切成内容方框）

实例

  background-color:yellow;
  background-clip:content-box;

四、css3文本

（一）、文本阴影

text-shadow：属性向文本设置阴影

语法：text-shadow: h-shadow v-shadow blur color;
属性值
- h-shadow {number}：必需。水平阴影的位置。允许负值
- v-shadow {number}:必需。垂直阴影的位置。允许负值
- blur {number}：可选。模糊的距离
- color {color}：可选。阴影的颜色

实例

h1 {
  text-shadow: 5px 5px 5px #FF0000;
}

（二）、文本溢出

text-overflow：属性规定当文本溢出包含元素时发生的事情

属性值
- clip：修剪文本
- ellipsis：显示省略符号来代表被修剪的文本
- string {string}：使用给定的字符串来代表被修剪的文本

实例

单行文本溢出

div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行文本溢出

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

（三）、文本自动换行

word-wrap：属性允许长的内容可以自动换行动

属性值
- normal：只在允许的断字点换行（浏览器保持默认处理）
- break-word：在长单词或 URL 地址内部进行换行
实例
```
div {
  word-wrap:break-word;
}
```

（四）、单词拆分

word-break：属性规定自动换行的处理方法

属性值
- normal：使用浏览器默认的换行规则
- break-all：允许在单词内换行
- keep-all：只能在半角空格或连字符处换行
实例
```
div {
  word-break: break-all;
}
```

五、CSS3渐变

（一）、线性渐变

创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

实例：

.div1 {
  /* 从上到下的渐变（默认情况下） */
  background: linear-gradient(red, blue); 
}
.div2 {
  /* 从左到右的渐变 */
  background: linear-gradient(right，red, blue); 
}
.div3 {
  /* 从左上角到右下角的渐变 */
  background: linear-gradient(to bottom right，red, blue); 
}

（二）、径向渐变

创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）

语法： background: radial-gradient(center, shape size, start-color, ..., last-color);

实例

.div1 {
  /* 颜色结点均匀分布的径向渐变 */
  background: radial-gradient(red, green, blue);
}
.div2 {
  /* 颜色结点不均匀分布的径向渐变 */
  background: radial-gradient(red 5%, green 15%, blue 60%);
}
.div3 {
  /* 形状为圆形的径向渐变 */
  background: radial-gradient(circle, red, yellow, green);
}

（三）、文字渐变

div {
 background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

六、css3新增字体单位

（一）、长度单位

rem

rem：是指相对于根元素（html)的字体大小的单位。简单的说它就是一个相对单位

html {
  font-size: 16px;
}
div {
  font-size: 2rem;  // 32px = 16px * 2
}

（二）、视窗单位

视窗(Viewport)：是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器
这些单位是vw, vh, vmin和vmax。它们都代表了浏览器（视窗(Viewport)）尺寸的比例和窗口大小调整产生的规模改变

在这里插入图片描述

CSS3新增的视窗单位有 vw vh vmin vmax

在这里插入图片描述

vm

1vw 等于视口宽度的1%，也就是说在视图宽度为1440px下，1vw=14.4px；

div {
  /* 视图宽度为1440px */
  width: 50vw;  /* 50vw = ( 50*1440 )/100 = 720px */
  height: 50vw;
}

vh

1vh 等于视口高度的1%，也就是说在视图高度为900px下，1vw=9px；

div {
  /* 视图高度为900px */
  width: 50vh;  /* 50vh = ( 50*900 )/100 = 450px */
  height: 50vh;
}

vmin

vmin的值是当前vw和vh中较小的值
在视图宽度为1440px 高度为900px的页面下 1vmin = 9px

div {
  /* 视图宽度为1440px 视图高度为900px */
  width: 50vmin;  /* 50vh = ( 50*900 )/100 = 450px */
  height: 50vmin;
}

vmax

vmax的值是当前vw和vh中较小的值
在视图宽度为1440px 高度为900px的页面下 1vmin = 14.4px

div {
  /* 视图宽度为1440px 视图高度为900px */
  width: 50vmax;  /* 50vh = ( 50*1440 )/100 = 720px */
  height: 50vmax;
}

七、课后作业

了解并尝试css3选择器
使用css3边框进行页面处理
完成css3背景，css3文本效果以及css3渐变例子
熟悉并掌握css3新增单位

程序员buddha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
016-CSS3新特性

一、CSS3选择器（一）、CSS3介绍CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准CSS3 被划分为模块，其中最重要的 CSS3 模块包括选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面（二）、属性选择器E[attribute^=‘val’]E[attribute^=‘val’]：选择具有att属性且属性值为以val开头的字符串的E元素/* 匹配具有class属性且属性值以a为开头的div元素 */div[class^="
复制链接

扫一扫