美文网首页
CSS笔记-2017-9-11

CSS笔记-2017-9-11

作者: liupeiyuan | 来源:发表于2017-09-11 13:13 被阅读0次

    边框

    div{
        border:2px solid#aaaaaa ; //边框粗细 实体边框的颜色
        padding:50px 40px ;  //衬垫大小
    
        width:300px ;  //宽度
        height:100px ;  //高度
    
        border-radius:50px;   //圆角半径
        border-radius:10px,20px,30px,0px;   //坐上角,右上角,右下角,左下角  
        border-radius:10px/20px ;  //椭圆边框
        border-radius:20%;    //圆角
        border-radius:10%/30%;   //椭圆边框
        border-top-left-radius:20px;   //左上角弧度
        border-image:url(/xx/xx/xx.png) 30 30 round/stretch;   //图片边框:图片路径,图片宽度,图片高度, 平铺/拉伸   (CSS3 允许您为元素使用多个背景图像。)
    }
    
    div{
        box-shadow:10px,10px,5px #aaaaaa;   //方框阴影:左偏移量,下偏移量,渐变度,阴影颜色
        
    }
    

    背景

    div{
        background:#aaaaaa;   //背景颜色
        background-color:red/#aaaaaa;   //背景颜色
        background:url(/xx/xx/xx.png);   //背景图片
        background-reoead:repeat/no-repeat;   //背景图片复制,不复制
        background-position:left top;   //背景图片位置
        background-size:20% 40%;    //
        background-origin:border-box/padding-box/content-box;    //边框位置,衬垫位置,中心位置
        background-clip:border-box/padding-box/content-box;    //区域
        
    }
    

    文本

    div{
        text-shadow:5px 5px 5px #FF0000;    //文本阴影
        word-wrap:break-word;    //长单词断行
    }
    
    Paste_Image.png

    2D

    div{
        transform-origin:20% 40%;    //设置中心点(旋转中心)
        transform:rotate(19deg);    //旋转
        transform:translate(50px,200px);   //平移
        transform:scale(2,4);    //缩放
        transform:skew(30deg,20deg);    //倾斜
        transform:matrix(0.866,0.5,-0.5,0.866,0,0);   //matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法
        需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。 
    }
    
    Paste_Image.png

    样式的过渡

    Paste_Image.png
    div
    {
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s, background 2s,height 2s,transform 2s;
    }
    
    div:hover  //鼠标滑过
    {
    width:200px;
    height:200px;
    background:red;
    transform:rotate(180deg);
    }
    

    动画

    Paste_Image.png
    div
    {
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    }
    //第一种写法
    @keyframes myfirst
    {
    from {background:red;}
    to {background:yellow;}
    }
    //第二种写法,多重变化
    @keyframes myfirst
    {
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
    }
    
    Paste_Image.png

    多列

    div{
    column-count:5; //文本5列
    }

    用户界面

    div
    {
    border:2px solid;
    padding:10px 40px; 
    width:200px;
    resize:both;   //界面大小可由用户拉伸
    overflow:auto;
    }
    

    相关文章

      网友评论

          本文标题:CSS笔记-2017-9-11

          本文链接:https://www.haomeiwen.com/subject/bpyxsxtx.html