CSS样式整理

很多功能为了实现兼容，需要加浏览器前缀

—— – webkit - ， chrome

—— – moz - ，firefox

—— – ms - ，IE

—— – o - ，opera

 

css3选择器

属性选择器

E[attr]

E[attr=value]

E[attr^=value]首字母是value

E[attr$=value]尾部结束字符是value   aaa.doc

E[attr*=value]只要包含value

ul > li 表示后代

span + p 表示span后第一个p

span ~ p 表示span兄弟元素中所有p标签

结构伪类选择器

E：nth-of-type  是指父元素下E这个类型元素的第n个元素

E : nth-child 是指父元素下第n个元素且这个元素为E

E：only-of-type 是指父元素下只有E一个元素类型（但可能还有别的元素）

E ： only-child 是指父元素下只有E这一个元素

E：not(attr=value) 选择除了E中有attr属性的元素

E：empty 选择没有内容的E元素

状态伪类选择器

：focus 元素中有焦点时

：checked 元素被选中时

：first-letter 第一个字母 ：first-line 第一行

：enabled 能够输入值的元素

：disabled 禁用输入的元素

：read-only 选择只读的元素

 

css3文本属性

text-shadow ： 水平距离 垂直距离 模糊距离 颜色，…

火焰字效果

技术分享

    #fire{
    text-align: center;
    margin: 200px auto;
    font-family: "Comic Sans MS";
    font-size: 80px;
    color: white;

    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

    }

    body {background:black; }

原网址：

 

text-stroke : w color

镂空字效果（须加前缀，只能在chrome下使用）

技术分享

    p {
                font-size: 100px;
               color: transparent;
               -webkit-text-stroke: 2px red;
            
            }

     

     

    @font-face {

    font-family : 名字

    src ： 嵌入字体地址

    好处 ： 解决了系统字体缺失 带来的页面文字效果的差别（iconfont）

    }

 

css3颜色透明度

opacity:0~1

rgba(0~255,0~255,0~255,0~1)

 

css3渐变

线性渐变

    background : linear-gradient  （方向(角度) ， 颜色1， 颜色2， …）

    1.第一个颜色后面百分比表示第一个到哪里结束，后面的颜色百分比表示的都是从哪里开始

    2.方向可以写成角度，让渐变主轴变换

技术分享

    p {
                width: 200px;
                height: 200px;
                background: linear-gradient(to top , blue 25%, yellow 50%, red 80%);
            
            }

径向渐变

background : radial-gradient( 方向( at 位置)， 颜色1， 颜色2，…)

技术分享

    p {
        width: 200px;
        height: 200px;
        background: radial-gradient(to top , blue 25%, yellow 50%, red 80%);
     
    }

最后分享两个有关css3的网站：

      能在线看到css3的效果以及属性对浏览器的兼容性

.com   这个主要是查看css3属性使用的兼容性，比较全的

稿源：勤快学QKXue.NET

扩展阅读：

http://qkxue.net/info/29685/css-3

http://qkxue.net/info/30109/css-3

http://qkxue.net/info/30056/css-3

http://qkxue.net/info/30099/css-3

http://qkxue.net/info/30042/CSS

CSS3样式整理