• CSS3


    CSS3

    CSS3  =   CSS2  +  新语法             对css2进行的扩充、删减、优化

      选择器:  标签选择器   类选择器  id选择器

        属性选择器

          E---element元素   data---属性

          <标签  属性="属性值"  ></标签>-----html元素  

          E[data]        选择带有data的元素对象,给该元素对象加样式

          E[data="one"]     选择带有data的元素对象,并且属性值等于one的加样式     

          E[data^="o"]     选择带有data的元素对象,并且属性值以o开头的加样式         ^ ----开头

          E[data$="e"]      选择带有data的元素对象,并且属性值以e结尾的加样式      $ ----结尾        

                 E[data*="n"]      选择带有data的元素对象,并且属性值包含n的加样式         * ----包含

              

     

        伪类结构  

           E:first-child{}                   第一个孩子加样式   

           E:last-child{}                   最后一个孩子加样式

           E:only-child{}                    只有一个孩子(独生子)的加样式                      

           E:nth-child(n){}                     第n个孩子加样式    n=1 2 3 4 5 .....

           E:nth-child(2n+1){}/E:nth-child(odd){}       奇数孩子加样式    n=1 3 5 7 .....                  

           E:nth-child(2n){}/E:nth-child(even){}       偶数孩子加样式         n=2 4 6 8 ....                        

                      

           

     

       伪元素          

         E:first-letter{}        设置第一个文字

         E:first-line{}                         设置第一行文字      

         E::after{}            往盒子里面插入内容 ,插在在盒子里面的后面

         E::before{}                 往盒子里面插入内容 ,插在在盒子里面的最前面                                                                                

                 

    •  设置文本的阴影

         text-shadow: 水平  垂直  模糊强度  颜色    //前两个必须有

         例如:text-shadow: 2px  2px  2px  blue  水平向右2px,垂直向下2px,模糊强度为2px,颜色为蓝色

                     -2px  -2px    2px  blue  水平向左2px,垂直向上2px,模糊强度为2px,颜色为蓝色      

             可以有多组值,用逗号隔开

            

    •  设置盒子的阴影          

      box-shadow:水平  垂直   模糊强度    模糊尺寸     颜色    内外阴影               默认是外阴影,但如果是外阴影,不加outset   

     

           

            

        盒子变成圆角

           

                   数值越大越圆   

        

                

         设置半透明

            color:rgba(255,0,0,0.3)  -----设置文本透明度,第四个数据就是透明度

           background:rgba(0,0,0,0.6) ----设置背景透明度  

           

         背景图片的尺寸

           background-size:  宽度  高度   ;      或者

           background-size: cover  背景图片会把整个盒子(宽度和高度)都用背景覆盖上  ------常用的一种方式

                       background-size: contain  把盒子的宽度和高度中较大的一个覆盖完就停止覆盖了              

      

     

  • 相关阅读:
    Zookeeper服务器启动
    BeanFactoryPostProcessor
    ZK简介
    自定义标签解析
    高性能MySQL
    Redis原理
    ApplicationContext
    ThreadPoolExecutor
    NW.js构建PC收银端安装程序的指南
    NW.js安装原生node模块node-printer控制打印机
  • 原文地址:https://www.cnblogs.com/strive-for-life/p/6129921.html
Copyright © 2020-2023  润新知