css3新的属性（上篇）背景、边框及选择器

最新推荐文章于 2024-05-23 17:56:03 发布

qq_45117533

最新推荐文章于 2024-05-23 17:56:03 发布

阅读量135

点赞数

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

本文链接：https://blog.csdn.net/qq_45117533/article/details/107464717

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

新的选择器
- 属性选择器
- - 伪类选择器
  - 伪元素选择器
背景和边框

新的选择器

属性选择器

[属性名=“value”]：匹配对应的属性值的元素
[属性名]：匹配对应的属性即可
[属性名^=“value”]：匹配以value开头的元素
[属性名*=“value”]：匹配包含value的元素
[属性名$=“value”]：匹配以value结束的元素
[属性名~=“value”]：匹配含有value，但是value得是独立的的元素
[属性名|=“value”]：匹配仅为value或者value-开头的元素

伪类选择器

:not(s){} 匹配不含有s选择符的元素
:root {}匹配元素在文档的根元素。在HTML中，根元素永远是HTML
:first-child {}匹配父元素的第一个子元素
:last-child {}匹配父元素的最后一个子元素
:only-child {}匹配父元素仅有的一个子元素
E:nth-child(n) {}匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效
E:nth-last-child(n) {}匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效
E:first-of-type {}匹配父元素下第一个类型为E的子元素
E:last-of-type {}匹配父元素下的所有E子元素中的倒数第一个
E:only-of-type {}匹配父元素的所有子元素中唯一的那个子元素E
E:nth-of-type(n) {}匹配父元素的第n个子元素E
E:nth-last-of-type(n) {}匹配父元素的倒数第n个子元素E
E:empty {}匹配没有任何子元素（包括text节点）的元素E
E:checked {}匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled {}匹配用户界面上处于可用状态的元素E
E:disabled {}匹配用户界面上处于禁用状态的元素E
E:target {}匹配相关URL指向的E元素

伪元素选择器

:first-letter/::first-letter {}设置对象内的第一个字符的样式。注意点：
- 这只能在块级元素上使用。其他若想使用必须先将其设置为块级元素。
- 该伪类常被用来配合font-size属性和float属性制作首字下沉效果。
- IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：:first-line
- CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。即E:first-letter可转化为E::first-letter
:first-line/::first-line {}设置对象内的第一行的样式。注意点和上面那个一样。
:before/::before { }设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
:after/::after {}设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
::placeholder {}设置对象文字占位符的样式。这个需要考虑兼容性的问题：

!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
input::-webkit-input-placeholder {
	color: green;
}
input:-ms-input-placeholder { // IE10+
	color: green;
}
input:-moz-placeholder { // Firefox4-18
	color: green;
}
input::-moz-placeholder { // Firefox19+
	color: green;
}
</style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

::selection {}设置对象被选择时的样式。需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。

背景和边框

1、边框

1.1 box-shadow

box-shadow: 0px 0px 100px 50px #fff inset;

定义元素的阴影；默认是无阴影：none。

上面代码片中第1个值定义元素的阴影水平偏移值。是正值的时候，阴影出现在元素右侧；是负值的时候，则阴影出现在元素左侧；
第2个值定义元素的阴影垂直偏移值。是正值的时候，阴影出现在元素底部；是负值的时候，则阴影出现在元素顶部；
第3个值定义元素的阴影模糊值半径。该值越大阴影边缘越模糊，若该值为0或者不写，阴影边缘不出现模糊。不允许负值；
第4个值定义元素的阴影外延值。是正值的时候，阴影将向四面扩展；是负值的时候，则阴影向里收缩，也可以不用写；
第五个值定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色；
inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影；
可以设定多组阴影效果，每组参数值以逗号分隔。即：

 box-shadow: 0px 0px 100px 50px #fff,
			0px 0px 250px 125px #ff0;

可以利用这个属性画一些很好看的图片。

1.2 border-radius

定义元素的圆角。

如果提供全部四个参数值，将按上左 top-left、上右 top-right、下右 bottom-right、下左 bottom-left的顺序作用于四个角；
提供三个，第一个用于top-left，第二个用于top-right和bottom-left，第三个用于bottom-right；
提供两个，第一个用于top-left和bottom-right，第二个用于top-right和bottom-left；
只提供一个，将用于全部的四个角。

当然每个参数还可以提供两个值，第一个为水平半轴，第二个为垂直半轴。以“/”隔开，简写的形式为：

border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;

这段代码等价于：

border-top-left-radius: 10px 20px;
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 30px 40px;
border-bottom-left-radius: 40px 50px;

1.3 border-image

定义边框的图片。这用得非常少，这里就不详细说它了。文章最后会提供两个网站，好奇的可以去研究一下。

2.背景

简写的语法形式为：

background：bg-image bg-position bg-size bg-repeat bg-attachment bg-origin bg-clip bg-color;

bg-image :定义元素使用的背景图像。在同一组背景定义中，如果背景颜色和背景图像都设置了，那么背景图像会覆盖在背景颜色之上。可以设置多组值，用逗号隔开；
bg-position：指定背景图像在元素中出现的位置。该属性可以接受1~4个参数值。如果提供三或四个，每个参数之前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。如果提供两个，第一个用于横坐标，第二个用于纵坐标。如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
bg-size：定义背景图像的尺寸大小。该属性接受1~2个参数值（cover和contain关键字只接受一个）。如果提供两个，第一个用于定义背景图像宽度，第二个定义高度；只提供一个，该值用于定义背景图像的宽度，高度将依据图像宽度定义进行等比缩放计算得到。除了可以去长度值和百分比外，还可以取下面三个值：

auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

bg-repeat：定义元素的背景图像如何填充。取值如下：

repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：当背景图像不能以整数次平铺时，会根据情况缩放图像。
space：当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。

bg-attachment：定义滚动时背景图像相对于谁固定。取值如下：

fixed：背景图像相对于视口（viewport）固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。

bg-origin：指定的背景图像计算background-position时的参考原点(位置)。取值如下：

border-box：从border区域（含border）开始显示背景图像。
padding-box：从padding区域（含padding）开始显示背景图像。
content-box：从content区域开始显示背景图像。

bg-clip：指定对象的背景图像向外裁剪的区域。取值如下：

border-box：从border区域（含border）开始向外裁剪背景。
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。目前为webkit 仅有的，使用方式：-webkit-background-clip: text。

最后给大家推荐两个css的参考手册网址，方便查看学习：

http://css.doyoe.com/
https://www.caniuse.com/

qq_45117533

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3新的属性（上篇）背景、边框及选择器

这里写自定义目录标题新的选择器属性选择器伪类选择器伪元素选择器功能快捷键新的选择器属性选择器[属性名=“value”]：匹配对应的属性值的元素[属性名]：匹配对应的属性即可[属性名^=“value”]：匹配以value开头的元素[属性名*=“value”]：匹配包含value的元素[属性名$=“value”]：匹配以value结束的元素[属性名~=“value”]：匹配含有value，但是value得是独立的的元素[属性名|=“value”]：匹配仅为value或者value-开头的元素
复制链接

扫一扫