css不改变图片大小,把边框放大

html-css012

css不改变图片大小,把边框放大,第1张

1.新建一个html文件,命名为test.html,用于讲解div+css怎么调输入框的大小位置。

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的边框。