css3属性

web嵌入字体

  @font-face{
        font-family: "字体名字";
        src:url("路径");
       font-weight:bold;
    }

例

    @font-face{
        font-family: "123";
        src:url("font/BlackoakStd.otf");
    }
    div{
        font-family: "123";
    }

box-sizing:border-box;

宽高固定边框不在往外撑而是向内占内容

outline 和border效果相似但不占网页空间

outline: 10px dashed black;

resize
将textarea的大小拖动关闭 resize:none不能修改 both可修改宽高 horizontal只改宽度 vertical 只能改高度l inherit

     textarea{
         width: 100px;
         height: 50px;
         resize:none;}

给div设置拖动

         div{
        width: 100px;
        height: 100px;
        background-color: red;

        resize:both;
        overflow: hidden;
    }

分栏
column-count: 3; 栏的数量
column-gap:100px;栏之间的距离
column-rule: 5px dashed red;分割线
例

   div{
        /*列的数量*/
        -webkit-column-count: 3;
        -moz-column-count: 3;
        -o-column-count: 3;
        column-count: 3;
        /*列之间的距离*/
        column-gap:100px;
        -webkit-column-gap:100px;
        /*分割线*/
        column-rule: 5px dashed red;
        -webkit-column-rule: 5px dashed red;
    }

弹性盒模型
display: -webkit-box; 将一个元素的子元素以弹性布局进行布局
-webkit-box-orient: vertical;子元素的排列方式（竖向）默认横向
-webkit-box-direction:reverse;（逆序）子元素的排列顺序
-webkit-box-flex:1;子元素如何分配剩余空间
-webkit-box-align:center;子元素的垂直对齐方式 start左 end右 center居中
-webkit-box-pack:center;子元素的水平对齐方式

css3属性

推荐阅读更多精彩内容