2.在test.html文件内,使用div创建一个模块,并设置div的id为mydiv。
3.在test.html文件内,在div标签内,使用input标签创建一个输入框。
4.在css标签中,通过类名mydiv设置div的样式 ,定义其宽度为300px,高度为200px,背景颜色为灰色。
5.在css标签中,使用margin-top来定义input的位置,距离div的上边缘为50px,使用width和height属性设置input输入框的大小为,长150px,高度为30px
6.在浏览器打开test.html文件,查看实现的效果。
不考虑兼容,可以使用transform:scale(.5,.5)样式,就是把元素缩小0.5倍。例子如下:
.content{position:relative
}
.content:before{
content: ''
position: absolute
width: 200%
height: 1px
bottom: 0
border-bottom: 1px solid #d6e4ed
-webkit-transform-origin: 0 0
transform-origin: 0 0
-webkit-transform: scale(.5,.5)
transform: scale(.5,.5)
-webkit-box-sizing: border-box
box-sizing: border-box
}
大致原理是:通过CSS3插入一个伪元素,该元素宽度为父级2倍,高度为1px,然后通过css3缩放将其缩小0.5倍,从未实现一个0.5px的边框。