CSS3

div>p:子代

div+p：div后面相邻的第一个p

div~p：div后面所有的兄弟p

1.属性选择器：

id选择器  #  通过id来选择
类名选择器 . 通过类名来选择
属性选择器 []  通过标签属性来选择

语法：
标志性符号;[]
^:开头  $:结尾   *:包含
E[title]:选中页面的E元素，并且E需要带有title属性
E[title="abc"]:选中页面的E元素，并且E需要带有title属性，属性值为abc
E[title^="abc"]:选中页面的E元素，并且E需要带有title属性，属性值以abc开头
E[title$="abc"]:选中页面的E元素，并且E需要带有title属性，属性值以abc结尾
E[title*="abc"]:选中页面的E元素，并且E需要带有title属性，属性值包含abc

结构伪类选择器：

E：first-child  选中父元素中的第一个子元素
E：last-child  选中父元素中的最后一个子元素
E：nth-child(n)  选中父元素中的第n+1个元素  n:0,1,2,3，4.。。。。。
偶数：2n  even
奇数：2n-1 odd
前5个：-n+5
E：nth-last-child（3）:从后向前选择，选中倒数第三个

注意：所选到的元素的类型 必须是指定的类型E，否则选择无效

E：empty表示元素为空的类型

E：target：表示元素被激活的状态，要配合锚点使用

伪元素： 通过css模拟出html效果

E::before
E::after  必须带有content属性

伪元素选择器：

E::first-letter  选中第一个字母
E::first-line 选中第一行
E::selection 表示选择的区域
通过设置color background

css3中新增两种颜色模式： RGBA red green blue (0-255) alpha:透明度(0-1)

HSLA:

H：色调  0-360
S：饱和度 0%-100%
L：亮度  0%-100%
A：alpha 透明度  0-1

盒子模型：

三个盒子：content-box         padding-box        border-box
box-sizing:border-box(内减模式)
content-box(外加模式)（默认值）

私有化前缀：

浏览器私有化前缀
-webkit-:谷歌，苹果
-moz-  :火狐
-ms-:ie
-o- :欧朋

边框：

边框圆角
    border-radiu:30px;
    border-radius:30px 40px 50px 60px;
    复制规律：
    从左上开始，顺时针赋值，如果这个角度没有值，去对焦
    border-radius:40px/60px;

边框阴影：
    box-shadow:水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 外/内阴影（inset）
    
边框图片：
    border-image-source:图片路径
    border-image-slice:裁剪
    border-image-width:边框宽度
    border-image-repeat:边框宽度
        repeat图片显示不完整
        round:图片平铺  优化了 ，图片会完整显示
        stretch：拉伸

背景：

背景可以改变大小，可以有多个背景
bakground-size:30px 30px;
background-size:30% 30%;
background-size:cover;覆盖
background=size:contain;包含

可以有多个背景：多个背景按照正常的语法格式书写，每个背景使用逗号隔开

背景原点：

background-origin:
    content-box
    padding-box
    border-box

背景裁剪

background-clip:
    content-box
    padding-box
    border-box

渐变

线性渐变：
    background-image:linear-gradient(方向，起始颜色，终止颜色)
    方向; to left right bottom top 35deg

转载于:https://my.oschina.net/u/3217409/blog/823268