2021-03-31

第八天
css3选择器
（一）属性选择器
1，属性选择器
选择某个属性 中括号扩起来，
[ class ] ｛
｝

2，选择 属性=属性值 X=“a”
[ class=“box1” ] ｛
｝

3， 选择 属性= 属性值 为 y_ 开头

  [属性    竖杠 = 属性值]
 [  class ｜ ="box_1"]   ｛
 ｝

4， 选择 属性＝ 属性值 为 y 开头
[ class ^ = 属性值 ]

5， 选择 属性 =属性值 属性值以y结束
[ class 美元符 = 属性值 ]

6， 选择 属性=属性值 属性值包含 y
[class * = 属性值 ]
（二）伪类选择器
1， ：nth_child () 第二个孩子
2， ：nth_last_child() 从后往前数第几个孩子
3， ：nth_of_type() 某一种的第几个孩子
4， ：nth_last_of_type() 某一种从后往前数第几个孩子
5， ：first -child 选择第一个
：last-child 选择最后一个
（三）伪元素
1，选择每一个元素的第一个字母或者第一个汉字 ：：first-letter ｛
2，第一行 ：：first-line ｛
3，在某个元素之前插入 ：：before｛｝
. box : :before box 里面的前面
4，在某个元素之后插入 在元素的里面的后边 ：：after｛｝

Css3颜色
HSL
H:色调 0-360 0或360是红色
120是绿色
240蓝色
S:饱和度 0％ 灰色 100％ 全彩
L:亮度 0％ 黑色 100％ 白色

文本阴影
一，盒子阴影
box-shodow : 150px 50px 10px red
水平距离 垂直距离 阴影模糊距离 影子颜色
二，文本阴影：
text_shodow :
水平 垂直 阴影模糊 影子色

Css3边框
一，圆角边框
border - radius:
4个值：左上角 右上角 右下角 左下角
一般300px就是最大值
值越大 越圆
3个值：左上 / 右上 左下 / 右下
2个值： 左上 右下 / 右上 左下
1个值：
二，圆筒形状，长方形中
border - radius:属性值为高度的一半
三，圆 ，正方形
border - radius:属性值为高度的一半

边框图片border-image :url （路径） 30 30 round
上下 左右
值多为border的宽度尺寸的一半 使图片展现 原图环绕 中间空白 的特点

三角形 宽 高 设置为0px
border 50px solid red
大小是100100的盒子
设置四个边框，不同颜色，将这个100100的盒子分成四份，此时是四个三角形拼在一起
用transparent 属性 ，透明的
1，只保留上边框 其他边框的颜色换成 transparent 属性 尖口向下

     2     保留上左边框     斜边三角形

怪异盒模型

调整尺寸

按钮