CSS3新增属性大全！

最新推荐文章于 2024-04-01 07:39:51 发布

不是小洋

最新推荐文章于 2024-04-01 07:39:51 发布

阅读量1.8k

点赞数 4

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_46534854/article/details/114852178

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1 CSS3 基本语法

1.1 CSS3 浏览器私有前缀

Chorme:  -webkit-
Safari:  -webkit-
IE;		 -ms-
Firefox: -moz-
Opera:   -o-

1.2 CSS3 新增长度单位

rem： 根元素字体大小的倍数。注意与 em 的区别。

vw： 把视口宽度分为100份，指定占其中的多少份。注意与百分比的区别。

vh： 把视口高度分为100份，指定占其中的多少份。

vmax： 把视口宽和高中大等分为100份，指定占其中多少份。

vmin： 把视口宽和高中小等分为100份，指定占其中多少份。

1.3 CSS3 新增颜色设置方式

rgba()： 在rgb的基础上多了不透明度（opacity），取值范围 0 ~ 1 之间的小数（0：完全透明，1：完全不透明）。

hsl()： h:色相（0_{360）；s：饱和度（0%}100%）；l：亮度（0%~100%）。

hsla() ：在 hsl 的基础上多了不透明度。

2 CSS3 选择器

2.1 基本选择器（6个）

标签名选择器：

标签名 {
    
}

类名选择器：

.类名 {
    
}

ID选择器：

#ID名 {
    
}

全局选择器：

* {
    
}

并集选择器（多选择器）

选择器1,选择器2,选择器3 {
    
}

交集选择器：

p.item {
    
}
.item.current {
    
}

2.2 层级选择器（4个）

后代元素选择器：

选择器1 选择器2 {
}

子元素选择器：

选择器1>选择器2 {
    
}
选择器1 > 选择器2 {
    
}

选择后面相邻的一个兄弟元素：

选择器1+选择器2 {
	
}

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

选择器1~选择器2 {
    
}

/* .nav 下除了第一 a，其他都被选择到了 */
.nav a+a {
    border-left: 1px solid #ccc;
}

2.3 属性选择器（5个）

[attrName] 选择拥有attrName 属性的元素。

[attrName="value"] 选择 attrName 属性的值是 value 的元素。

[attrName^="value"] 选择 attrName 属性的值以 value 开头的元素。

[attrName$="value"] 选择 attrName 属性的值以 value 结尾的元素。

[attrName*="value"] 选择 attrName 属性的值中包含 value 的元素。

2.4 伪类选择器

① 动态伪类选择器（5个）

:link		选择地址没有被访问过的超链接元素
:visited	选择地址被访问过的超链接元素
:hover		选择鼠标悬停在上面的元素。
:active		选择鼠标在上面并且按键按下不松手的元素
:focus		选择获取焦点的元素。

② 目标伪类选择器（1个）

:target		选择当前锚点指向的元素。

③ 语言伪类选择器 (1个，了解)

lang()		根据语言选择元素（lang 属性的值）

④ UI元素伪类选择器（3个）

:enabled	选择可以使用的表单控件（没有设置disabled 属性）
:disabled	选择不可以使用的表单控件（设置了disabled属性）
:checked	选择到被选中的单选按钮、复选框、下拉选项（option）

⑤ 结构伪类选择器（12个）

:root	选择到根元素
:empty	选择到既不能有文本内容也没有后代元素的元素

:first-child			所有兄弟元素中的第一个
:last-child				所有兄弟元素中的最后一个
:nth-child(n)			所有兄弟元素中的第n个，n是个数字
:nth-last-child(n)		所有兄弟元素中的倒数第n个，n是个数字
:only-child				没有兄弟元素的元素

:first-of-type			所有兄弟元素中同类型的第一个
:last-of-type			所有兄弟元素中同类型的最后一个
:nth-of-type(n)			所有兄弟元素中同类型的第n个,n是个数字
:nth-last-of-type(n)	所有兄弟元素中同类型的倒数第n个，n是数字
:only-of-type			没有同类型兄弟元素

⑥ 否定伪类选择器（1个）

:not(选择器)			  排除满足小括号中选择器的元素

2.5 伪元素选择器（6个）

::first-letter		选择元素中第一字母
::first-line		选择元素中第一行
::after				给元素动态创建最后一个子元素
::before			给元素动态创建第一个子元素
::placeholder		用于设置输入框或文本域中placeholder属性设置的文字的样式
::selection			用于设置被鼠标选中的文字的样式

2.6 选择器的优先级（权重）

ID选择器 > 类名选择器、伪类选择器、属性选择器  > 标签名选择器、伪元素选择器  > 全局选择器

3 CSS3 新增盒子模型相关样式

① box-sizing 属性

通过设置该属性，决定 width 和 height 设置的是内容的大小还是盒子的总大小。

值：

content-box，默认值，width 和 height 设置的是内容的大小。

border-box, width 和 height 设置的是盒子的总大小。

② 盒子阴影 box-shadow

box-shadow: 3px 2px;  /*设置阴影的偏移位置， 颜色默认黑色*/
box-shaodw: 3px 3px 5px;  /*设置阴影的偏移位置和模糊值*/
box-shaodw: 3px 3px 5px #f90;  /*设置阴影的偏移位置和模糊值以及颜色*/
box-shadow: 3px 3px 10px 2px #f90;  /*2px表示外延*/
box-shadow: 3px 3px 10px inset;  /* inset 表示设置内阴影*/
box-shadow: 3px 3px 10px 2px #f90 inset;

/*给元素同时设置 多个阴影*/
box-shadow: 3px 0 2px cyan, 
            0 5px 2px pink,
            -5px 0 2px green,
            0 -5px 2px purple;

③ 不透明度 opacity

设置元素整体的不透名度，取值范围是 0 ~ 1 之间的小数，数值越大越不透明，0表示完全透明，1表示完全不透明。

4 CSS3 新增背景属性

4.1 新增属性

background-origin 设置背景图调整位置所在坐标系的原点

值：
padding-box : 默认值，背景图位置原点在padding区域
content-box : 背景图位置原点在内容区域。
border-box : 背景图位置原点在边框上。

background-clip 裁剪背景图，设置什么范围内的背景图可见

值：
border-box :  默认值，边框以及边框以内背景图可见。
padding-box : 内边距以及内边距以内背景图可见。
content-box : 仅内容区域上的背景图可见。
text : 只有文字上的背景图可见。需要设置私有前缀。

-webkit-background-clip: text;

background-size 调整背景图图片的大小

值：
第一种方式： 指定两个长度，第一个是背景图宽度，第二个背景图高度；如果写了一个长度，被当做宽度，背景图高度根据比例自动算。
第二种方式： 使用关键字：
           contain	优先保证背景图全部显示在元素上，可能会造成元素有空白
           cover    优先保证元素上都会显示背景图，可能会有小部分背景图不可见。推荐使用

4.2 background 复合属性

 background: url(../images/bg05.jpg) no-repeat center/300px 300px;

复合属性的相关规则：

background-size 复合到 background 中，需要写在 background-position 值的后面，用 / 隔开。
background-origin 和 background-clip 值是一样的关键字，设置一个被当做background-origin,设置两个(前面是origin，后面是clip)

4.3 多背景图

CSS3允许一个元素设置多个背景图片。

background: url(../images/bg03.jpg) no-repeat, 
            url(../images/bg04.jpg) no-repeat right top/200px 200px,
            url(../images/bg05.jpg) no-repeat left center/300px 200px;

5 CSS3 新增边框属性

5.1 边框圆角

CSS 属性名	含义	值
border-top-left-radius	设置左上角圆角	设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径
border-top-right-radius	设置右上角圆角	设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径
border-bottom-left-radius	设置左下角圆角	设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径
border-bottom-right-radius	设置右下角圆角	设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径
border-radius	复合属性	长度，同时设置多个角

border-radius 属性值的设置规则：

设置正圆圆角：

1 个值：表示 4 个角的半径。

2 个值：第一个值表示左上和右下的半径，第二个值表示右上和左下的半径。

3 个值：第一个值表示左上角的半径，第二个值表示右上和左下的半径，第三个值表示右下的半径。

4 个值：分别表示左上、右上、右下、左下的半径。

设置椭圆圆角（x半径与y半径不一致）

使用 / 分别设置 x 半径和y半径，每一组都可以写 1 ~ 4 个值
border-radius:20px / 40px; 
border-radius:20px 40px 50px 60px / 40px 30px 20px 10px; 
border-radius:100px / 40px 30px 20px 10px; 

5.2 外轮廓

CSS 属性名	含义	值
outline-width	设置外轮廓宽度	长度
outline-color	设置外轮廓颜色	颜色
outline-style	设置外轮廓风格	none、solid、dashed、double、dotted 等
outline	复合属性	三个子属性的值
outline-offset	设置外轮廓与边框的距离，默认是 0	长度

注意： outline-offset 不是 outline 的子属性！

6 CSS3 新增文本属性

CSS 属性名	含义	值
text-decoration-line	设置哪一种修饰线	none: 默认值，无修饰线 underline: 下划线 overline: 上划线 line-through：删除线
text-decoraiton-color	设置修饰线颜色	颜色
text-decoration-style	设置修饰线风格	solid：默认，实线 dashed：虚线 dotted：点线 double：双实线 wavy：波浪线
text-decoration	复合属性	三个子属性的值
text-align-last	设置最后一行文本的水平对齐方式	start：默认值，开始方向对齐 end：结束方向对齐 left：左对齐 right：右对齐 center：中间对齐 justify：两端对齐
white-space	设置文本的换行方式	normal：默认值，默认的样式 pre：原格式显示 pre-wrap: 在pre的基础上增加了自动换行 pre-line: 在pre的基础上增加了自动换行但是会忽略多个空格。 nowrap：强制文本在一行显示
text-overflow	设置文本的溢出方式	clip：默认，溢出的文本裁掉 ellipsis：文字过多，后面显示省略号。
text-shadow	设置文本阴影	设置 2 ~ 4 个值，包括颜色、偏移位置、模糊值

注意：

CSS3之后， text-align 属性的默认值不是 left 了，而是 start 。
text-overflow 属性生效的前提是： ① 设置 overflow:hidden ② 需要设置 white-space: nowrap。

不是小洋

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS3新增属性大全！

1 CSS3 基本语法1.1 CSS3 浏览器私有前缀Chorme: -webkit-Safari: -webkit-IE; -ms-Firefox: -moz-Opera: -o-1.2 CSS3 新增长度单位rem：根元素字体大小的倍数。注意与 em 的区别。vw：把视口宽度分为100份，指定占其中的多少份。注意与百分比的区别。vh：把视口高度分为100份，指定占其中的多少份。vmax：把视口宽和高中大等分为100份，指定占其中多少份。vmin：把视口宽和
复制链接

扫一扫