css 笔记

1：li 中除了最后一个元素其余的添加border边框

li:not(:last-child) {
   border-bottom: 1px solid #999999;
}

2：决定定位实现“弹窗”居中 

html:

<div class="dialog">
        <div class="header">我是标题</div>
        <div class="content">我是内容</div>
    </div>

css:

<style>
        .dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 300px;
            box-shadow: 0px 0px 3px #000;
            /* margin-top: -150px;
            margin-left: -200px; */
            transform: translate(-50%, -50%);
        }

        .dialog .header {
            padding: 10px;
            background: #000;
            color: #fff;
        }

        .dialog .content {
            padding: 10px;
        }
    </style>

效果：

 

 3：动画animation

animation 属性是 animation-name、animation-duration、 animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state属性的一个简写属性形式。

• animation-name 指定动画的名称，可以逗号分割设置多个（以下皆可）；

• animation-duration 指定动画运行的时间；

• animation-delay 指定动画执行前的延时；

• animation-timing-function 指定动画执行的速度函数，如linear、ease（默认）、ease-in-out等，也可用贝塞尔函数cubic-bezier()；

• animation-iteration-count 指定动画的运行的次数，默认为1，可以为Infinite无限次；

• animation-direction 指定动画是否反方向播放，normal 正常的顺序，alternate 交替运行，reverse 反向运行，alternate-reverse 反向交替运行；

• animation-fill-mode 设置CSS动画在执行之前和之后的样式，none 不设置，forwards 保留最后一帧动画的样式，backwards 立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值，both 同时应用forwards和backwards的规则；

• animation-play-state 定义一个动画是否运行或者暂停，值为running、paused。

4：背景 background

background 是我们最常用的属性之一，但作为一个老前端，我也只能羞耻的说我目前并没有完全掌握这个属性。

background 是一个简写属性，可以包括多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment。接下来我们一个个来看看这些属性的作用：

• background-color 最常用的属性，默认不继承（background的所有属性都默认不继承），初始值为 transparent；有时候使用默认继承可以实现一些好玩的效果，比如倒影；

• backgroundo-image 背景图片，可以逗号分割设置多个，可以是图片url或者渐变色；

• background-clip 背景剪裁，可以逗号分割设置多个，值可以为 broder-box（初始值）、padding-box、content-box、text（新，将背景被文字剪裁）；

• background-origin 设置背景起始点的相对区域，搭配 background-position使用，可以逗号分割设置多个，值可以是border-box、padding-box（初始值）、content-box；

• background-position 设置背景的起始点，可以逗号分割设置多个，值可以是 10px 20px 、center center 、left 10px bottom 20px等等，非常灵活；

• background-size 设置背景的大小，可以逗号分割设置多个，值可以是数字值如30px 40px、auto auto（初始值）、conver、contain；background-repeat: repeat就是根据这个尺寸大小来重复的。

• background-repeat 设置背景的重复方式，初始值为 repeat，常使用值的还有no-repeat；

• background-attachment 设置背景图像的位置是在视口内固定，还是随着包含它的区块滚动。可以逗号分割设置多个，值有scroll（初始值）、local、fixed。详情查看MDN