文字描边
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
;才不会改变布局