本文介绍了前端开发中的UI状态伪类选择器、伪元素选择器及其用法，详细讲解了content属性、权重值、文字阴影、圆角、盒子阴影和裁剪背景等CSS知识点，帮助开发者掌握更高级的CSS技巧。
UI状态伪类选择器
E:checked，选择匹配的E元素并且E元素被选择上（用在单选和多选）。
checked要选择才能触发，并不是一开始就触发。
伪元素选择器
E::before，选择匹配的E元素，并且在匹配的元素的所有子元素的前面插入内容。E::after，选择匹配的E元素，并且在匹配的元素的所有子元素的后面插入内容。
在使用before和after时一定要配合着content属性来使用。content属性的值为要插入的内容。
伪元素插入的内容在页面中是无法被选中的。
插入生成的内容基础
注意：
- 生成的内容与元素内容之间是没有空格的。除非在生成的内容中添加。
- 生成的内容位于元素框的内部。
- 生成的内容默认是一个inline，可以使用display属性进行修改。
- 只要属性能够被继承下来，生成的内容会从它依附的元素上继承属性值。
content属性
-
字符串，里面的内容都是字符串。
-
attr('属性名')，将选中的某个目标的属性名对应值作为插入的内容。可以混用
content:attr(属性名) '字符串'
content的内容不会搜索引擎收录，抓取。
content中，即使也HTML标签页不会被页面解释出来。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div::after {
content:"<h1>hahaha</h1>";
display: block;
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
显示：
权重值
- ID选择器100
- 类选择器、属性选择器、伪类选择器10
- 标签选择器 1
- 层次选择器拆开之后分别进行相加。
- 行内样式权重1000
文字阴影
格式：text-shadow:value
color lrshadow tbshadow blur
- color，阴影的颜色。如果不写就是文本颜色。
- lrshadow，左右阴影，负数表示放在文本左侧，正数表示放在文本右侧。
- tbshadow，上下阴影，负数表示放在文本的上侧，正数表示放在文本的下侧。
- blur，模糊度，模糊半径。
text-shadow可以使用多个，多个效果叠加。text-shadow: green 12px 20px 19px,red 1px 1px 5px;
圆角
元素的边框的角都是直角的。
border-radius这个值可以理解为横向距离有多少，纵向距离有多少。但是实际上指的是生成了指定水平半径和垂直半径的圆形或椭圆形。
- px
- %，按照元素宽度及高度的百分比进行向内弯曲。
border-radius:左上/右下 右上/左下
border-radius:左上 右上/左下 右下
border-radius:左上 右上 右下 左下
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius总共有8个值：左上角水平半径、左上角垂直半径、右上角水平半径、右上角垂直半径、右下角水平半径、右下角垂直半径、左下角水平半径、左下角垂直半径
圆角用的最多的地方实际上就是设置元素圆角。
盒子阴影
盒子阴影就是给元素盒子创建的阴影。box-shadow
lrshadow tbshadow blur color [inset]
- lrshadow，左右阴影，负数表示的左侧，正数右侧。
- tbshadow，上下阴影，负数上，正数下。
- blur，模糊度。
- color，阴影颜色。
- inset，如果加上inset将盒子阴影投射在盒子内部。
裁剪背景
默认的时候背景从内容区域开始经过内边距延伸到边框的外边界。
background-clip用来决定将背景延伸到哪里。
- border-box，默认值。延伸到边框的外边界。
- padding-box，延伸到内边距的外边界。
- content-box，内容区域的外边界。
- text，沿着文字裁剪。 需要使用
-webkit-background-clip:text
使用text时候背景填充会按照文字区域进行填充，这个时候如果文字有颜色将会和裁剪后的背景重合，你是看不到背景色的，不过可以将color设置为transparent。
我们给input重新设置样式时，原始的单选框和复选框会被隐藏掉。
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
