前端 HTML/CSS （十二）

àì夳堔傛蜴生んèń 2023-01-01 09:49 124阅读 0赞

### 目录 ###

*   *   *   *  UI状态伪类选择器
             *  伪元素选择器
             *  插入生成的内容基础
             *  content属性
             *  权重值
             *  文字阴影
             *  圆角
             *  盒子阴影
             *  裁剪背景

#### UI状态伪类选择器 ####

`E:checked`，选择匹配的E元素并且E元素被选择上（用在单选和多选）。

> `checked`要选择才能触发，并不是一开始就触发。

#### 伪元素选择器 ####

*  `E::before`，选择匹配的E元素，并且在匹配的元素的所有子元素的前面插入内容。
 *  `E::after`，选择匹配的E元素，并且在匹配的元素的所有子元素的后面插入内容。

在使用before和after时一定要配合着content属性来使用。content属性的值为要插入的内容。

> 伪元素插入的内容在页面中是无法被选中的。

#### 插入生成的内容基础 ####

**注意：**

1.  生成的内容与元素内容之间是没有空格的。除非在生成的内容中添加。
2.  生成的内容位于元素框的内部。
3.  生成的内容默认是一个inline，可以使用display属性进行修改。
4.  只要属性能够被继承下来，生成的内容会从它依附的元素上继承属性值。

#### 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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]

#### 权重值 ####

*  ID选择器100
 *  类选择器、属性选择器、伪类选择器10
 *  标签选择器 1
 *  层次选择器拆开之后分别进行相加。
 *  行内样式权重1000

#### 文字阴影 ####

格式：`text-shadow:value`

`color lrshadow tbshadow blur`

*  color，阴影的颜色。如果不写就是文本颜色。
 *  lrshadow，左右阴影，负数表示放在文本左侧，正数表示放在文本右侧。
 *  tbshadow，上下阴影，负数表示放在文本的上侧，正数表示放在文本的下侧。
 *  blur，模糊度，模糊半径。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]  
text-shadow可以使用多个，多个效果叠加。`text-shadow: green 12px 20px 19px,red 1px 1px 5px;`

#### 圆角 ####

元素的边框的角都是直角的。

`border-radius`这个值可以理解为横向距离有多少，纵向距离有多少。但是实际上指的是生成了指定水平半径和垂直半径的圆形或椭圆形。

*  px
 *  %，按照元素宽度及高度的百分比进行向内弯曲。

![在这里插入图片描述][20210101214509160.png]  
`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重新设置样式时，原始的单选框和复选框会被隐藏掉。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/5c1e6831dbbf4a1182058e30430740ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]: /images/20221120/353439506cfe45728c26152372cbaf6d.png
[20210101214509160.png]: https://img-blog.csdnimg.cn/20210101214509160.png