css怎么让悬浮框下移

html-css014

css怎么让悬浮框下移,第1张

新建一个html文件，命名为test.html，用于讲解CSS实现文本框怎么下移。在test.html文件内，使用div标签创建一个模块，并设置div的class属性为mydiv，主要用于下面通过该class来设置css样式。在test.html文件内，在div标签内，使用input标签创建一个文本框，并设置input的id属性为myinput。在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内在css标签中，定义类名为mydiv的样式，使用border设置div的边框为1px灰色边框，使用width设置div的宽度为400px，使用height设置div的高度为200px。在浏览器中打开test.html文件，查看文本框未下移前的效果。在css标签内，定义id为myinput的样式，使用margin-top设置文本框下移20px。在浏览器打开test.html文件，查看实现的效果。

根据你的图片，达到这种效果有2种方法：

1.用图片png图片作为背景；

2.可以用纯css就可以达到，举个例子：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

<style type="text/css">

body{

  background-color: #444

}

.test{

  width: 15px

  height: 30px

  box-sizing:border-box

  border-top: 15px solid #f5f5f5

  border-bottom: 15px solid #f5f5f5

  /*border-left: 20px solid #0f0*/

  border-right: 15px solid transparent

 /* border-top-right-radius: 4px

  border-radius: 12px*/

}

.csspic{

  width: 200px

  height: 400px

  margin:50px auto

  background:  url(images/5.jpg) -15px top no-repeat

  -webkit-background-size: cover

  background-size: cover

  border-radius: 10px

  position: relative

  border: 15px solid #f5f5f5

  -moz-background-clip: border

  -webkit-background-clip: border-box

  -o-background-clip: border-box

  background-clip: border-box

}

.img{  

  overflow: hidden

  width: 260px

  height: 400px

}

.sjx{

  position: absolute

  top:30px

  left: -15px

  background:  url(images/5.jpg) left -30px no-repeat

  -webkit-background-size: 500px

  background-size: 500px

  z-index: 9999

}

.csspic img{

  height: 100%

}

</style>

</head>

<body>

  <div class="csspic">

      <div class="sjx">

          <div class="test"></div>

      </div>

      <div class="img"><!-- <img src="images/5.jpg">--></div>

   

  </div>

</body>

</html>