渐变
线性渐变
默认写法，不加前缀，要在方向前面加to，顺序从右向左
兼容写法，不能在方向前加to，顺序是从左向右
background: -webkit-linear-gradient(0deg ,blue 50px,green 60px,red 110px);代表蓝绿过渡效果在50到80之间
repeating代表是重复的
当设置度数时background: linear-gradient(0deg,blue,green,red); 默认从下往上
background: -webkit-linear-gradient(0deg,blue,green,red);默认从左往右
-
当什么都不设置的话，加不加前缀都是从上往下
以下是代码及运行结果
.item{
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
color: white;
text-align: center;
font-size: 50px;
line-height: 200px;}
.item1{
background: linear-gradient(blue,green,red);
}
5F9DABB3-65B4-48ED-8B9F-2DE582705A86.png
.item2{
background: -webkit-linear-gradient(blue,green,red);
}
2037120D-4770-4DCE-9281-88338E951F36.png
.item4{
background: -webkit-linear-gradient(top left,blue,green,red);
}
F8825C8E-B07E-4C56-A6C6-D3D99393D824.png
.item3{
background: -webkit-repeating-linear-gradient(0deg ,blue 70px,green 80px,red 90px);
}
120438D8-382E-4A26-A7D7-A1B5D5944CAB.png
径向渐变
- 不能确定角度，圆的旋转无意义100px代表半径
- 可以指定方向，如top
- 在长方形内，径向渐变是椭圆，可以添加circle属性变成圆形
- 其他和线性渐变类似
以下是例子
.item5{
background: -webkit-radial-gradient( red 30px,orange 40px,yellow 50px,green 60px,cyan 70px,blue 80px,purple 90px)
}
3644FEB8-BA70-421A-8448-BC628CB1C3C8.png
.item6{
background: -webkit-radial-gradient(top, red 30px,orange 40px,yellow 50px)
}
D7BF9B8D-692C-4107-BDEB-6C56700C2220.png
.item7{
background: -webkit-repeating-radial-gradient( red 30px,orange 40px)
}
E91BAC9C-9D0C-4211-9D04-B7AE8984E0EE.png
.item8{
width: 420px;
background: -webkit-repeating-radial-gradient(circle, red 30px,orange 40px)
}
E8421EE8-E87C-4C11-B515-8716A0FE8F27.png
.item9{
/* width: 420px; */
background: -webkit-radial-gradient(circle, red 70%,orange 71%)
}
D21A0F4B-F3A4-47B9-8911-47A14D876CE6.png
选择器
子代选择器
div>p 子代选择器 选择的是直接子集，如例所示：选择的是p标签，父级是div的p的标签
兄弟毗邻选择器
div+p 兄弟毗邻选择器，紧跟在div后面的p标签 ，中间不能有其他标签
后面的所有p选择器
div ~p 跟在div后面的所有p标签，同级
属性选择器
- p[title]{}带有title属性的p标签
- p[title]{}带有title属性的p标签且title属性值为s1的p标签
- p[title*=s]{}title 属性包含s的属性
- p[title$=text]{}title属性必须有text结尾的p标签
- p[title^=text]{}title属性必须有text开头的p标签
伪类选择器
- p:nth-child(1)在同级里面，找到第一个p标签，并且是p标签，然后赋值样式
- p:first-child{};第一个p标签
- p:last-child{};最后一个p标签
- p:only-child{};p标签只有一个时候不能有同级元素，独生子
- p:nth-of-type(){}顺序只会看p标签顺序，不管其他标签;
- p:first-of-type{};第一个p标签
- p:last-of-type{};最后一个p标签
- p:only-of-type{};选择属于其父元素唯一的 <p> 元素的每个 <p> 元素
- p:nth-last-of-type(n){};最后第n个 p标签
- input:checked{}被选中的复选框，或者单选框
- p:first-letter对首字母进行设置
- p:first-line对首行进行设置
