伪类
1.动态伪类选择器
:link 设置a对象在未被访问前的样式表属性
:visited 设置a对象在其链接地址已被访问过时的样式表属性
:hover 设置对象在其鼠标悬停时的样式表属性
:active 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性
定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序:a:link、a:visited、a:hover、a:active
2.结构性伪类选择器
:first-child 选择某个元素第一个子元素
:last-child 选择某个元素最后一个子元素
:nth-child() 选择某个元素的一个或者多个特定的子元素
:nth-last-child 选择某个元素的一个或者多个特定的子元素,从这个元素的最后一个子元素开始算
:nth-of--type() 选择指定的元素
:nth-last-of--type() 选择指定的元素,从元素的最后一个开始计算
:first-of-type 选择一个上级元素下的第一个同类子元素
:last-of-type 选择一个上级元素下的最后一个同类子元素
:only-of-type 选择的是它父元素唯一一个子元素
:empty 选择的元素里面没有内容
3.伪元素
:first-letter 将特殊的样式添加到文本的首字母
:first-line 将特殊的样式添加到文本的首行
:before 在某些元素之前插入某些内容
:after 在某些元素之后插入某些内容
色彩
1.透明
opacity:value -----> (0-1)
2.颜色
rgba(R, G, B, A)
R | 正整数 | 百分数 |
G | 正整数 | 百分数 |
B | 正整数 | 百分数 |
A | Alpha 透明度 ( 0~1 ) |
hsla(H, S, L, A)
H | Hue(色调) ,红色:0 | 360,绿色:120,蓝色:240。 取值范围:0 ~ 360 |
S | Saturation(饱和度)。取值范围:0.0% ~ 100.0% |
L | Lightness(亮度)。取值范围:0.0% ~ 100.0% |
A | Alpha 透明度 ( 0~1 ) |
3.线性渐变
linear-gradient()
background: linear-gradient(to bottom, #ffb400, #ffd700);
background: linear-gradient(to right, #ffb400, #ffd700);
4.径向渐变
radial-gradient()
/*circle 圆*/
.circle{
background-image: radial-gradient(circle at right,orange,green);
}
/*ellipse 椭圆*/
.ellipse{
background-image: radial-gradient(ellipse at right,orange,green);
}
css3实现三角形、菱形、平行四边形等
// 半圆
.testbody{
width: 100px;
height: 200px;
border: 1px solid #ccc;
background: red;
margin: 50px auto;
border-radius: 0px 100px 100px 0px;
}
// 菱形
.testbody{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
transform: rotate(-45deg);
}
// 平行四边形
.testbody{
width: 200px;
height: 200px;
background: #6a6;
margin: 100px auto;
transform: skew(20deg);
}
// 五角星
.testbody{
position: relative;
width: 0;
height: 0;
border-bottom: 70px solid #f66;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
margin: 150px auto;
transform: rotate(35deg);
}
.testbody::before{
position: absolute;
top: -50px;
left: -69px;
content: '';
width: 0;
height: 0;
border-bottom: 80px solid #f66;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
}
.testbody::after{
position: absolute;
content: '';
top: 4px;
left: -105px;
width: 0;
height: 0;
border-bottom: 70px solid #f66;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: rotate(-70deg);
}
// 六角星
.testbody{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid #f66;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
margin: 100px auto;
}
.testbody::before{
position: absolute;
content: '';
top: 30px;
left: -50px;
width: 0;
height: 0;
border-top: 100px solid #f66;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
盒子阴影效果
box-shadow : h-shadow v-shadow blur spread color inset;
元素 | 描述 | 必需 |
---|---|---|
h-shadow | 水平阴影的位置。允许负值 | 是 |
v-shadow | 垂直阴影的位置。允许负值 | 是 |
blur | 模糊距离 | 否 |
spread | 阴影的尺寸 | 否 |
color | 阴影的颜色。 | 否 |
inset | 将外部阴影(outset)改为内部阴影 | 否 |
过渡
transition: property duration delay timing-function;
transition-property | 过渡属性(默认值为all) |
transition-duration | 过渡持续时间(默认值为0s) |
transition-timing-function | 过渡函数(默认值为ease函数) |
transition-delay | 过渡延迟时间(默认值为0s) |
动画
@keyframes配合animation使用
// 滚动条
.marquee {
width: 100%;
height: 32px;
overflow: hidden;
position: relative;
}
.marquee a {
white-space: nowrap;
position: absolute;
line-height: 32px;
animation: marquee 14s linear infinite;
padding-left: 120%;
text-decoration: none;
color: #000;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
文字排版
制作字体阴影
text-shadow: h-shadow v-shadow blur color; (这属性每次用的时候很尴尬,我一个前端这属性还是我们ui告诉我的)
text-shadow: 0 0 20px red;
文字排版益处自动省略号
text-overflow:clip|ellipsis|string;
clip 需要overflow:hidden支持,但是不加clip只要overflow:hidden却也可以实现效果
text-overflow:clip;
overflow: hidden;
新增字体单位rem
相对于应用<html>根元素的字体尺寸 。