• CSS各种问题积累


    1.background与background-color</p>

    这两者都可以这么用:background:red; background-color:red; 其实background-color只是background的一个子项而已。完整的background包括

    background-color

    background-image

    background-repeat

    background-attachment

    background-position

    完整的写法是这样的background: #00FF00 url(bgimage.gif) no-repeat fixed top; 

    2.第一条中的background属性值的第一个在css3中可以是各种过渡效果的,比如线性过渡、径向过渡。例如代码:

    background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

    详细的请看:http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html

    3.上面的background-image属性还真是不好搞了,一定了解之后发现在过渡效果时-webkit-的写法很麻烦,-webkit-的过渡效果有两种实现,较传统的是-webkit-gradient(),较新的是-webkit-linear-gradient().由于-webkit-gradient()是所有写法中最复杂的,所以详细讲解,其它的应该就能轻松掌握了。

    先看background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(.5,rgba(0,255,0,1)),to(rgba(255,255,255,1)));

    1. linear指出是线性渐变,当然还可以写radial,表示径向渐变。

    2. 0 0,0 100% 这两组参数成对出现,表示开始的位置和结束的位置。0代表像素值,100%是相对位置表示法,指的是直到结束的位置。

    3. from()与后面的to()是一对,但都是可写可不写的货,表示颜色值,关于它的参数可以直接填如#fff,或者transparent(透明)、rgba颜色值。

    4. rgba色值的格式rgba(255,255,255,1),前三个参数不多说了,后面的1代表的是透明度,可以取0-1之间的数,但不能写成0%-100%

    5. color-stop()意思是在指定的位置,放置一个指定的色值。.5在中段位置,也可以写成50%同样是指中段位置。当你用一系列的color-stop去描述色值分布时便可不用from,to方法了。

    color-stop(0,transparent)=from(transparent),color-stop(1,transparent)=to(transparent)。但是当不是从0开始的,且没有from时前面的色值默认为第一个color-stop指定的色值。

    4.background-size:20px 40px;其中第一个参数指的是width,第二个是height

    5.word-spacing 与 letter-spacing

    word-spacing指的是左右两个单词之间的距离;letter-spacing指的是左右两个字母之间的距离。

    6.在css的position中常见的属性有这几个:absolute relative fixed static。 

    static : 默认,没有任何效果,top button等也不起作用

    absolute:相对于它的非static父类的定位 (让出之前的位置)

    fixed:相对于浏览器窗口的定位(以前一直觉得这时absolute实现的效果,其实absolute也是一种相对的定位方式)。

    relative:相对与其父类的定位 (之前的位置还会保留)

    详细的解释见:http://diandian.cw66.com/post/2012-09-04/40038049036

  • 相关阅读:
    Spring框架(一)-----核心理解
    vi常用编辑
    Avue使用renren-fast-vue开源脚手架工程(一)
    sqlServer触发器调用JavaWeb接口
    Linux常用别名设置
    油猴+IDM不限速下载
    Nginx配置静态web项目
    消息中间件rabbitMQ
    springboot自定义starter
    Nginx配置微信小程序 文件验证
  • 原文地址:https://www.cnblogs.com/zhangran/p/2968701.html
Copyright © 2020-2023  润新知