属性选择器:
  1.完全匹配的属性选择器。 就是完全匹配的字符串。
    [id=article]{
      color:red;
    }
  2.包含匹配选择器。包含有指定的字符串。
    语法是:[attribute*=value] attribute 指的属性名,value 指的是属性值, 包含采用“*=”符号。
      [id*=article]{
          color:red;
      }
  3.首字符匹配选择器。只要开头字符符合匹配。
    语法是:[attribute^=value] attribute 指的属性名,value 指的是属性值, 包含采用“^=”符号。
      [id^=article]{
          color:red;
      }
  4.尾字符匹配选择器。 只要匹配结尾的字符串。
    语法是:[attribute$=value] attribute 指的属性名,value 指的是属性值, 包含采用“$=”符号。
      [id$=article]{
          color:red;
      }

伪类选择器:
  1.before 伪类元素选择器,主要作用是在选择某个元素之前插入内容。
    语法:元素标签:before{
        content:"插入的内容"
       }
    p.before{
      content:"文字"
    }
  2.after 伪类元素选择器,主要作用是在选择某个元素之后插入内容。
      语法:元素标签:after{
          content:"插入的内容"
      }
      p.after{
        content:"文字"
      }
  3.first-child 指定元素列表中第一个元素的样式。
    li:first-child{
        color:red;
    }
  4.last-child 指定元素列表中第一个元素的样式。
    li:last-child{
        color:red;
    }
  5.nth-child 和 nth-last-child 可以指定某个元素的样式或从后数起某个元素的样式。
    //指定第2个li元素
      li:nth-child(2){}
    //指定倒数第2个li元素
      li:nth-last-child{}
    //指定偶数个li元素
      li:nth-child(even){}
    //指定基数个li元素
      li:nth-child(odd){}

阴影
  1.box-shadow 让元素具有阴影效果。
    语法: box-shadow:<length><length><length>|| color;
      第一个 length 是阴影水平偏移值;
      第二个 length 是阴影垂直偏移值;
      第三个 length 是阴影模糊偏移值;
  水平和垂直 值可负。
  div{
    /*其他浏览器*/
      box-shadow:3px 4px 2px #000;
    /*webkit 浏览器*/
      -webkit-box-shadow:3px 4px 2px #000;
    /*firefox*/
      -moz-box-shadow:3px 4px 2px #000;
    }
  2.text-shadow 设置文本内容的阴影效果或模糊效果。
      语法:同box-shadow 相同。

背景
  1.background-size 用于设置背景图片的大小。
    语法:background-size:10px 5px;
        -webkit-background-size:10px 5px;
  2.background-clip 用于确定背景的裁剪区域。
  3.backrground-origin 用于指定background-position 属性的参考坐标起始位置。
    border 边框的左上角开始, content 内容区域 的左上角开始 padding 从padding区域开始。
  4.background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#000)); 背景渐变

圆角边框
  border-radius:
  border-radius:10px 5px;
  -moz-border-radius:10px 5px;
  -webkit-border-radius:10px 5px;
  或
  border-radius:10px 5px 10px 5px;
  -moz-border-radius:10px 5px 10px 5px;
  -webkit-border-radius:10px 5px 10px 5px;
  viewport 虚拟窗口
  <meta name="viewport" content="width=device-width,initial-seale=1,user-scalable=0"/>
  参数:
    width 指定虚拟窗口的屏幕宽度大小。
    height 指定虚拟窗口的屏幕高度大小。
    initial-scale 指定初始缩放比例
    maximum-scale 指定允许用户缩放的最大比例
    minimum-scale 指定允许用户缩放的最小比例
    user-scalable 指定是否允许手动缩放。
    <link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)" href="样式地址"/>
        当屏幕宽度位于 600~900 时调用这个参数。
  在竖屏模式下
  <link rel="stylesheet" media="all and(orientation:portration)" href="样式地址"/>
  在横屏模式下
  <link rel="stylesheet" media="all and(orientation:landscape)" href="样式地址"/>
  @media only screen and (min-width:213px) {}
    only 移动浏览器会自动忽略,
    不支持的浏览器会自动忽略这个样式。

Geolocation 地理定位。
  navigator.geolocation.getCurrentPosition(function(pos){
    console.log("当前地理位置的纬度"+pos.coords.latitude);
    console.log("当前地理位置的经度"+pos.coords.longitude);
    console.log("当前纬度的精度"+pos.coords.accuracy);
  })

初探css3的更多相关文章

  1. 用css动态实现圆环百分比分配——初探css3动画

    最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额.要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态! 在mdn把新特性gradients(渐变).trans ...

  2. CSS3_边框 border 详解_一个 div 的阴阳图

    (面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框 足够大     3. 需要的三角形的部分, border-top-color 设置为 ...

  3. CSS3_文本样式

    1. 文字阴影 text-shadow 使用: text-shadow:    水平方向偏移量    垂直方向偏移量    模糊程度    颜色; #box { text-shadow: 10px 1 ...

  4. 网页前端开发:微博CSS3适用细节初探

    浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口.而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新, ...

  5. CSS3盒模型display初探(display:box/display:flex)

    可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

  6. css3之弹性盒模型初探(一)

    什么是弹性盒模型? 弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小. 弹性盒模型的提出可以解决一些响应式布局的需求   如何使用弹性盒模型? ...

  7. css3属性之filter初探

    filter属性是css不常用的一个属性,但是用好了可以给网页增色不少!ps: IE不支持此属性: img { -webkit-filter: grayscale(100%); /* Chrome, ...

  8. 第 23 章 CSS3 边框图片效果

    学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 提 ...

  9. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

随机推荐

  1. js把数据处理成钱的格式

    1.var Rmoney = parseFloat(money).toFixed(2);//把money处理成保存2位小数的格式

  2. OLEDB事务

    学过数据的人一般都知道事务的重要性,事务是一种对数据源的一系列更新进行分组或者批处理以便当所有更新都成功时同时提交更新,或者任意一个更新失败时进行回滚将数据库中的数据回滚到执行批处理中的所有操作之前的 ...

  3. Web站点如何防范XSS、CSRF、SQL注入攻击

    XSS跨站脚本攻击 XSS跨站脚本攻击指攻击者在网页中嵌入客户端脚本(例如JavaScript),当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的,比如获取用户的Cookie,导 ...

  4. 【代码笔记】Java基础:Java的方法和类

    面向过程与面向对象都是我们编程中,编写程序的一种思维方式.例如:公司打扫卫生(擦玻璃.扫地.拖地.倒垃圾等), 按照面向过程的程序设计方式会思考“打扫卫生我该怎么做,然后一件件的完成”,最后把公司卫生 ...

  5. java应用程序已被安全设置阻止的解决办法(总有一个适合你)

    1. 在1月底的一次Java自动更新升级后,我点开已经配置好的Java小程序,赫然看到如下错误: 在网上查找了很多资料,发现就是此次更新的问题,解决方法如下: 控制面板—>Java—>安全 ...

  6. Microsoft BI - SSRS

    1. Shared Dataset 功能在 SQL Server 2008 R2 / 2012 / 2014 的下列三个版本中不支持,详情请参考此处: Express Edition with Adv ...

  7. js 时间特效

    http://example.com:1234/test.htm#part2:Hash的作用. http://www.cnblogs.com/Interkey/p/RunAsAdmin.html

  8. python ftp download with progressbar

    i am a new one to learn Python. Try to download by FTP. search basic code from baidu. no one tells h ...

  9. 理解及快速测定 Azure 虚拟机的磁盘性能

    随着越来越多的用户将生产系统迁移到 Azure 平台的虚拟机服务中,Azure 虚拟机的性能愈发被关注.传统的数据中心中,我们通常使用 CPU,内存,存储和网络的性能来衡量生产压力.特别是对于 IO ...

  10. Oracle的sql语句的两种判断形式

    Oracle的sql语句的两种判断形式 判断当前列同时改动当前列 判断一个情况改动其他值 一类情况详解:实现的是当num这一列的值为3时,就显示好 以此类推 1)case num when 3 the ...