zoukankan      html  css  js  c++  java
  • CSS3新的UI方案

    文本新增样式

    一、opacity:指定了一个元素的透明度 0~1

    二、新增颜色模式rgba:很好的解决了背景透明,字体颜色不透明的需求。

    三、文字阴影:text-shadow用来为文字添加阴影,而且可以添加多层,阴影值之间用逗号隔开(x轴偏移量,y轴偏移量,颜色,模糊程度)

    四、文字描边:只有webkit内核才支持:-webkit-text-stroke(准确的来说不能算是css3的东西,但需要大家知道)

    五、文字排版:direction:ltr 从左到右     rtl从右到左

           一定要配合Unicode-bidi:bidi-override 来使用

    盒模型新增样式

    一、盒模型阴影:box-shadow以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。 (x轴偏移量,y轴偏移量,颜色,模糊程度)

            inset 默认阴影在框外,使用inset后,阴影在边框内

    二、倒影:-webkit-box-reflect  设置元素的倒影(准确的来说不能算是css3的东西,但需要大家知道)三个值的顺序不能改

         倒影的方向

                                      第一个值,above, below, right, left

                      倒影的距离
                                       第二个值,长度单位
                      渐变
              第三个值

    三、resize:resize CSS 属性允许你控制一个元素的可调整大小性。(一定要配合overflow:auto使用)

          both:允许用户在水平和垂直方向上调整元素的大小。

            horizontal:允许用户在水平方向上调整元素的大小。

            vertical:允许用户在垂直方向上调整元素的大小。

    四、box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。

      可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。

      content-box: 默认值,标准盒子模型。 width 与 height 只包括内容的宽和高,

             不包括边框(border),内边距(padding),外边距(margin)。

      border-box:width 和 height 属性包括内容,内边距和边框,但不包括外边距。

            这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。

    新增UI样式

    一、圆角:border-radius 

        注意
          百分比值
          在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
          在 11.50 版本以前的 Opera 中实现有问题。
          Gecko 2.0 (Firefox 4) 版本前实现不标准:水平半轴和垂直半轴都相对于盒子模型的宽度。
          在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。

    二、边框图片

      border-image-source:属性定义使用一张图片来代替边框样式;如果只为none,则仍然使用border-style 定义的样式。

      border-image-slice:会通过规范将的图片明确的分割为9个区域:四个角,四边以及中心区域。值得百分比参照于image本身!!

      border-image-repeat :定义图片如何填充边框。或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。

                 stretch:拉伸

                 repeat,round:平铺

      border-image-width 定义图像边框宽度。 默认值为1,不可继承

      border-image-outset属性定义边框图像可超出边框盒的大小   正值: 可超出边框盒的大小

    三、背景

      css2{

        background-color 会设置元素的背景色

        background-image:属性用于为一个元素设置一个或多个背景图像,图像在绘制时,

                  以z轴方向堆叠的方式进行。先指定的图像会在之后指定的图像上面进行绘制。

        background-repeat:CSS 属性定义背景图像的重复方式。

                  背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

        background-position:指定背景位置的初始位置

                  如果只有一个值被指定,则这个值就会默认设置背景图片位置中的水平方向,与此同时垂直方向的默认值被设置成50%。

        background-attachment:决定背景是在视口中固定的还是随包含它的区块滚动的。

                   fixed:此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动 。

                   scroll:此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动

            }

       css3{

        background-origin:设置背景的渲染的起始位置 

                 border-box

                 padding-box

                 content-box

        background-clip:设置背景裁剪位置

        background-size:设置背景图片的大小

                单值时,这个值指定图片的宽度,图片的高度隐式的为auto

                两个值: 第一个值指定图片的宽度,第二个值指定图片的高度

        background:简写属性  顺序无关

                }

           

  • 相关阅读:
    JS在线编辑器
    meta标签
    webstorm快捷键
    微信JS-SDK调用
    iOS -- UIApplication
    Xcode -- apple llvm 6.0 error错误如何解决
    C -- 字符串数组与字符串指针
    MAC -- 小技巧
    C语言 -- 折半查找小程序
    C -- 小程序
  • 原文地址:https://www.cnblogs.com/fxiong/p/10321741.html
Copyright © 2011-2022 走看看