前端基础知识学习---CSS3学习（六）盒模型样式

文字描边

h1{
    font: 100px/200px "微软雅黑";
    text-align: center;
    color: white;
    -webkit-text-stroke: pink 4px;
}

文字排版

实例，省略过长内容显示为…

div{
    width: 200px;
    height: 100px;
    border: 1px solid;
    margin: 0 auto;
    white-space: nowrap;/*不换行*/
    overflow: hidden;/*省略溢出内容*/
    text-overflow: ellipsis;
}

注意：这个的使用的前提是：不能让元素的大小靠内容撑大，也就是不能使用display: inline;属性

盒模型新增样式

盒模型阴影

box-shadow: inset 10px 10px 10px 0px black ;

说明：box-shadow较text-shadow多了两个参数，第一个是阴影方向，第五个是阴影大小

#warp{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: pink;/*以上所有样式就是让盒子水平和垂直居中*/
    text-align: center;
    line-height: 100px;
    transition: 1s;
}
#warp:hover{
    box-shadow:  10px 10px  10px 0px black ;
}

倒影-webkit-box-reflect

img{
    vertical-align: middle;
    -webkit-box-reflect: right;
}

resize:允许你控制一个元素的可调整性，需要overflow：auto配合使用

#warp{
    display: inline-block;
    width: 200px;
    height: 200px;
    background: pink;
    resize: both;
    overflow: auto;
}

box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素，

#warp > div{
    margin: 10px;
    width:130px ;
    height: 130px;
    background: deeppink;
    float: left;
    border: 1px solid;
    box-sizing: border-box;
}

在上面的css代码中使用 float: left;如果要使用 border: 1px solid;就必须添加box-sizing: border-box;才不会改变布局