css3，选择器，边框，伪类，渐变，背景，图片

2019-10-11

字数统计: 1.4k字 | 阅读时长: 5分

阅读量 48

选择器

基础选择器

1
2
3

div>p: 子代
    div+p： div后面相邻的第一个p
    div~p: div后面所有的兄弟p

属性选择器：

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(1)　选中父元素中的第5个子元素
        n: 0,1,2,3,4。。。
        偶数： 2n  even
        奇数：2n-1 odd
        前5个： -n+5
      E：nth-last-child(3): 从后向前选择， 选中倒数第3个

      div:nth-child(9)

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

1 2	E：empty 表示元素为空的状态 E:target: 表示元素被激活的状态要配合锚点使用

伪元素：

1
2
3

通过css模拟出html效果
      E::before
      E::after  必须有content 属性

伪元素选择器：

1
2
3

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(内减模式)border-box(内减模式) /content-box（外加模式）(默认值)

` box-sizing: border-box   盒模型`

私有化前缀：

浏览器私有化前缀：

-webkit-: 谷歌 苹果
            -moz-:火狐
            -ms-：ie
            -o-：欧朋

边框

边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征
###边框圆角：

border-radius: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: 拉伸

背景：

背景可以改变大小，可以有多个背景

background-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

##渐变

线性渐变：

1
2
3

background-image: linear-gradient(方向，起始颜色，终止颜色);

           方向：to left right bottom top   35deg

必要的元素：
a、方向
b、起始颜色
c、终止色

###径向渐变：
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
1、必要的元素：
a、辐射范围即圆半径 (半径越大，渐变效果越大)
b、中心点即圆的中心 (中心点的位置是以盒子自身)

background: radial-gradient(
            150px  at left center,
           yellow,
           green
        );

以左上角为圆的中心点

background: radial-gradient(
            150px  at 0px  0px,
             yellow,
             green
        );

c、渐变起始色
d、渐变终止色
2、关于中心点：中心位置参照的是盒子的左上角
3、关于辐射范围：其半径可以不等，即可以是椭圆

div{
         width: 300px;
         height: 300px;
         margin:100px auto;
         background: radial-gradient(
             250px  at 0px 0px,
             yellow,
             green
         );
         border-radius: 150px;
    }

背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
background-size:width,height 可以设置背景图片的宽度以及高度

background-size设置背景图片的尺寸

background-size:600px,auto;
      自动是适应盒子的宽度
        background-size: 100% auto;  当宽度发送改变时，高度会有内容溢出。
    常规用法，通过百分百，和像素来调整背景的尺寸.
    background-size: auto 100%;

cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
整个背景图片完整显示在背景区域.
contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
也可以使用长度单位或百分比

案例:全屏背景自动适应.

background-origin(原点，起点)设置背景定位的原点

所谓的背景原点就是调整背景位置的一个参照点.
调整背景图片定位的参照原点.

border-box以边框做为参考原点；
padding-box以内边距做为参考原点；
content-box以内容区做为参考点；

background-clip设置背景区域clip(裁切)

border-box裁切边框以内为背景区域；
padding-box裁切内边距以内为背景区域；
content-box裁切内容区做为背景区域；

以逗号分隔可以设置多背景，可用于自适应局
背景图片尺寸在实际开发中应用十分广泛。