CSS3常用属性-CSDN博客

CSS3

关系选择器

~ 选择相邻元素后面的所有兄弟元素
+ 选择相邻元素后面的第一个兄弟元素

属性选择器

[属性 = 属性值]
- ^= 以某值开头
- $= 以某值结尾
  - wenku.baidu.com/org/view?or…
- *= 包含某值

伪类选择器

:before 在被选元素的内容前面插入内容
:after 在被选元素的内容后面插入内容
- attr(属性名) 将元素某一个属性的内容作为插入的内容
:empty 选择内容为空的元素
- 案例：选择页面中所有内容为空并且href属性以http开头的a标签，并将href属性内容作为a标签的内容
:not 排除选择器
:last-child 选择某一个元素父级下的最后一个子元素
:first-child 选择某一个元素父级下的第一的子元素
:nth-child(length) 选择某个元素父级下面的第length个子元素
- nth-child(length) 参数是具体数字、length为整数、从1开始计算
- nth-child(n) 参数是n、通常参数其他计算，从0开始计算
  - nth-child(n*length) n的倍数选择，n从0开始算
  - nth-child(n+length) 选择大于等于length后面的元素
  - nth-child(-n+length) 选择小于等于length前面的元素
- nth-child(even) 选择偶数元素
- nth-child(odd) 选择奇数元素

思考：到底哪个元素被选中了?

<style>
    p:nth-child(1){
        color:red
    }        
</style>
<div style="border:1px solid red">
    <span>span</span>
    <p>p1</p>
    <p>p2</p>
</div>
<br>
<div style="border:1px solid green">
    <p>p1</p>
    <p>p2</p>
</div>复制代码

背景设置

背景尺寸

background-size 设置背景图片尺寸

auto：背景图像的真实大小。
cover：背景图片等比例缩放以撑满容器（背景图片有可能超出盒子大小）
contain：背景图片等比缩放以撑满容器（背景图像不会超出盒子大小）
直接设置大小 background-size: 100px 100px; 或者backgound-size: 10% 10%;

背景重复

round 如果背景图片在平铺的时候有部分区域被截取 round会将图片本身缩小以达到完全显示图片的目的
space 在水平方向上和竖直方向上能平铺多少张图片就平铺多少张图片剩余的空隙平均分配

多背景

.el {
    background: 
        url(img/bg1.png) no-repeat left top,
        url(img/bg2.png) no-repeat right top,
        url(img/bg3.png) no-repeat left bottom,
        url(img/bg4.png) no-repeat right bottom;
}复制代码

内减盒模型

box-sizing： content-box / border-box;

过渡

什么是过渡

某个css属性p，有初始值a，有目标值b。如果指定p属性为过渡显示，那么当p属性从a变到b时，会有动画效果。

过渡属性

transition-property: 过渡属性;
transition-duration: 动画时间;
transition-timing-function: 动画执行的速度效果;
transition-delay: 延迟

注意：通过伪类选择器为元素添加过渡，动画效果会被还原。

复合属性

某一个属性发生变化时，执行动画
- transition: width 1s linear 2s;
所有属性变化时，都执行动画
- transition: all 1s linear;
几个属性变化时，各自执行动画
- transition: width 2s linear, height 1s ease 1s;

动画速度效果

linear：匀速运动
ease：慢快慢（默认值）
ease-in：由慢到快
ease-out：由快到慢
steps(integer)：分多少步完成

2D转换

通过CSS3中的2D转换，我们可以对元素进行移动、缩放、旋转、变形操作。

缩放 scale

scale(x, y) ：在x、y轴上对元素进行缩放，如果第二个参数未提供，取第一个参数的值。
scaleX() ：指定元素在X轴的缩放（水平方向）
scaleY() ：指定元素在Y轴的缩放（垂直方向）
以自己的中心点进行缩放

平移

translate(x, y)：在x、y轴上对元素进行移动，如果第二个参数未提供，则默认值为0。
translateX()：指定元素在X轴的移动（水平方向）
translateY()：指定元素在Y轴的移动（垂直方向）
中心点水平或垂直移动

旋转

rotate(0deg)：指定元素的旋转角度。
- 坐标轴也会跟着旋转

变形

skew(x, y)：在x、y轴上对元素进行扭曲（斜切）操作。如果第二个参数未提供，则默认值为0。
skewX()：指定元素在X轴的扭曲（水平方向）
skewY()：指定元素在Y轴的扭曲（垂直方向）

中心点

transform-origin：指定元素在2D转换中的中心点。
- 语法： transform-origin: x y;
- 值可以是关键字 left right top bottom 也可以是具体的像素值

动画

用@keyframes 动画名 {}定义一个动画

该动画可以被多个元素重复使用

动画属性介绍

animation-name：动画名称
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
- linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
animation-delay：动画延迟的时间
animation-iteration-count：动画的循环次数
animation-direction：动画是否反向运动
- normal：正常方向
- reverse：反方向运行, 从动画结束状态运行到动画开始状态
- alternate：动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-fill-mode：动画结束状态
- forwards：保存结束时状态
- backwards：结束还原
animation-play-state 设置动画的运行状态
- paused 暂停
- running 运行
animation: 复合写法
- anmatiton： boxAnimation 1s linear 2s alternate infinite forwards;
- 解释：延迟两秒(2s)，匀速(linerar) 正常运行再反方向运行(alternate ) 执行 boxAnimation 动画，时长为1秒(1s)，重复无限次(infinite)。

阴影

文字阴影

.text {
    text-shadow: offsetX offsetY blur color;
            /* 阴影水平方向偏移 阴影垂直方向偏移 阴影模糊程度 阴影颜色 */
    text-shadow: offsetX offsetY blur color, offsetX offsetY blur color;
            /* 多重阴影使用逗号隔开 */
}复制代码

盒子阴影

.box {
    box-shadow: offsetX offsetY blur spread color inset;
        /* 阴影水平方向偏移 阴影垂直方向偏移 阴影模糊程度 阴影大小 阴影颜色 内阴影 */
}复制代码

圆角

.box {
    border-radius: 20px; /* 四个角的圆角都是20px */
    border-radius: 20px 30px; /* 左上、右下圆角20px 右上、左下圆角30px */
    border-radius: 20px 30px 40px; /* 左上圆角20px 右上、左下圆角30px 右下圆角40px */
    border-radius: 20px 30px 40px 50px; /* 左上角开始顺时针圆角分别为20px、30px、40px、50px */
}
.box {
   border-top-left-radius: 10px; /* 左上圆角10px */
   border-top-right-radius: 20px; /* 右上圆角20px */
   border-bottom-left-radius: 30px; /* 左下上圆角30px */
   border-bottom-right-radius: 40px; /* 右下圆角40px */
}
.box {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* 当盒子为正方形时，呈现原形 */   
}
.box {
    width: 200px;
    height: 100px;
    border-radius: 100px/50px; /* 盒子呈现为椭圆形 */
}复制代码

案例：安卓机器人

渐变

线性渐变：沿着某条直线朝一个方向产生渐变效果
```
.box {
    background-image: linear-gradient(方向|角度, 颜色1 位置1, 颜色2 位置2, ...);
}复制代码
```
- 方向
  - to top => 0deg
  - to right => 90deg
  - to bottom => 180deg （默认值）
  - to left => 270deg
- 角度：任意角度
镜像渐变：径向渐变指从一个中心点开始沿着四周产生渐变效果
```
.box {
    background-image: radial-gradient(形状 大小 at 渐变中心点x位置 渐变中心点y位置, 颜色 颜色位置, 颜色 颜色位置 ...);
}复制代码
```
- 形状
  - circle 渐变始终保持圆形
  - ellipse（默认）渐变颜色的形状会随容器变化而变化
    - 如果容器形状为正方形，则ellipse和circle显示一样
- 大小
  - closest-side：最近边
  - farthest-side：最远边
  - closest-corner：最近角
  - farthest-corner：最远角（默认）
- 渐变中心点位置
  - 可以是关键字 left top right bottom
  - 可以是具体的像素值 100px 100px