css3

  1. 渐变色
    background-image: linear-gradient(to left, red, orange, yellow)

    第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:

    角度英文作用
    0degto top从下至上
    90degto right从左至右
    180degto bottom从上至下
    270degto left从右至左
     to top left从右下至左上
     to bottom right从左上至右下

    第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

  2. 文字与字体
    text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。

    text-overflow: clip        //剪切
    text-overflow: ellipsis        //省略

    但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果:

    text-overflow: ellipsis
    overflow: hidden
    white-space: nowrap


    word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。

    word-wrap: normal
    word-wrap: break-word        //在内容边界换行

     

  3. 文本阴影

    text-shadow: X-Offset Y-Offset blur color
    
    text-shadow: 0 1px 1px #fff

    X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移
    Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移
    Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0
    Color:是指阴影的颜色,其可以使用rgba色
     

  4. 背景
    1) background-origin 设置元素背景图片的原始起始位置

    background-origin: border-box
    background-origin: padding-box
    background-origin: content-box

    2) background-clip 用来将背景图片做适当的裁剪以适应实际需要

    background-clip: border-box
    background-clip: padding-box
    background-clip: content-box
    background-clip: no-clip

     

  5. css选择器
    1) 属性选择器

    属性选择器功能
    div[att^ = 'val']匹配以val开头的att属性
    div[att$ = 'val']匹配以val结尾的att属性
    div[att* = 'val']匹配任意位置包含val的att属性

    html:

    <a href="xxx.pdf">我链接的是PDF文件</a>
    <a href="#" class="icon">我类名是icon</a>
    <a href="#" title="我的title是more">我的title是more</a>

    css:

    a[class^=icon]{
      background: green;
      color:#fff;
    }
    a[href$=pdf]{
      background: orange;
      color: #fff;
    }
    a[title*=more]{
      background: blue;
      color: #fff;
    }

    2) 结构性伪类选择器
    root

    :root {background:orange;}

    “:root”选择器等同于<html>元素,简单点说:

    :root{background:orange}
    
    html{background:orange}

    得到的效果等同。

    not
    :not选择器称为否定选择器,可以选择除某个元素之外的所有元素

    input:not([type="submit"]){
      border:1px solid red;
    }

    给除了type="submit"的input之外所有的input添加边框。

    ③ empty
    :empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。

    <p></p>​
    p:empty {
      display: none;
    }​

    ④ target
    :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素

    <h2><a href="#brand">Brand</a></h2>
    <div class="menuSection" id="brand">
        content for Brand
    </div>
    .menuSection{
      display: none;
    }
    #brand:target{/*这里的:target就是指id="brand"的div对象*/
      display:block;
    }


    ⑤ first-child / last-child / nth-child(n) / nth-last-child(n) / first-of-type / last-of-type / nth-of-type(n) / nth-last-of-type(n) / only-child / only-of-type

    ol li:first-child{
        color: red;
    }
    
    ol li:last-child {
        color: red;
    }
    
    ol li:nth-child(2n){
        color: red;
    }
    
    ol li:nth-last-child(5){        // 倒数第五个li
        color: red;
    }
    
    .wrapper p:first-of-type {        /*我要改变第一个p的背景为橙色*/
      background: orange;
    }
    
    .wrapper p:last-of-type{
      background: orange;
    }
    
    .wrapper p:nth-of-type(2n){
      background: orange;
    }
    
    .wrapper p:nth-last-of-type(3){
      background: orange;
    }
    
    .post p:only-child {
      background: orange;
    }
    
    .wrapper div:only-of-type {
      background: orange;
    }


    ⑥ 待补充...
     

  6. 变形与动画
    1)旋转 rotate()

    div{transform: rotate(45deg)}

    2)扭曲/斜体 skew()

    div{transform:skew(45deg)}

    3)缩放 scale()

    div{transform: scale(1.5)}

    4)位移 translate()

    div{transform: translate(50px,100px)}
    
    // 水平垂直居中
    div{
        width: 200px;
        height: 200px;
        background: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    5)原点 transform-origin

    div{transform-origin: left top}

    6)过渡 transition

    div{
        transition-property: width        //指定过度属性
        transition-duration:1s        //过渡时间
        transition-delay: 0.2s        //延迟时间
        transition-timing-function: ease        //延迟函数
    }

    transition-timing-function分类:ease(默认)、linear、ease-in、ease-out、ease-in-out

    7)Keyframes

    @keyframes around{
        0% {
            transform: translateX(0);
        }
        25%{
            transform: translateX(180px);
        }
        50%{
            transform: translate(180px, 180px); 
        }
        75%{
            transform:translate(0,180px);
        }
        100%{
            transform: translateY(0);
        }
    }
    
    div {
        animation: around 5s ease 0.1s;
    }
    
    div{
        animation-name: around
        animation-duration:1s
        animation-delay: 0.2s
        animation-timing-function: ease
        animation-iteration-count: infinite
        animation-direction: alternate
        animation-play-state: running
    }
    
    //播放次数animation-iteration-count为整数或者infinite
    //播放方向animation-direction一般为normal或alternate(循环播放)
    //播放状态animation-play-state为running或paused

    8)多列显示 columns

    div{
        columns: 200px 2;        //分为两列显示,每列宽度200px
        column-gap: 2em;       //列间距
        column-rule: 1px dotted red;        //边框
        column-span: all || none;        //跨列
    }        
    
    




     

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值