CSS3新增盒子模型相关属性

最新推荐文章于 2024-06-04 00:09:25 发布

peakJun

最新推荐文章于 2024-06-04 00:09:25 发布

阅读量82

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/JunGuanDreams/article/details/130714126

版权

1，box-sizing

总结

代码演示

<style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: deepskyblue;
      padding: 5px;
      border: 5px solid black;
      margin-bottom: 20px;
    }
    .box2{
      width: 200px;
      height: 200px;
      background-color: gray;
      padding: 5px;
      border: 5px solid black;
      box-sizing: border-box;
    }
  </style>
</head>

运行结果

2，resize

总结

代码演示

<style>
    .box1{
      width: 400px;
      height: 400px;
      background-color: skyblue;
      resize: horizontal;
      overflow: hidden;
    }
    .box2{
      width: 600px;
      height: 600px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">123</div>
  </div>
</body>

运行结果

3，box-shadow

总结

代码演示

<style>
    .box1{
      width: 400px;
      height: 400px;
      background-color: orange;
      margin: 0 auto;
      margin-top: 100px;
      font-size: 40px;

      /* 写两个值 含义：水平位置 垂直位置 */
      /* box-shadow: 10px 10px; */

      /* 写三个值 含义：水平位置 垂直位置 阴影颜色 */
      /* box-shadow: 10px 10px blue; */

      /* 写三个值 含义：水平位置 垂直位置 模糊程度*/
      /* box-shadow: 10px 10px 10px; */

      /* 写四个值 含义：水平位置 垂直位置 模糊程度 阴影颜色*/
      /* box-shadow: 10px 10px 10px blue; */

      /* 写五个值 含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色*/
      /* box-shadow: 10px 10px 10px 3px blue; */

      /* 写六个值 含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影*/
      /* box-shadow: 10px 10px 10px 3px blue inset; */

      position: relative;
      top: 0;
      left: 0;
      transition: .9s linear all;
    }
    .box1:hover{
      box-shadow: 0px 0px 10px black;
      top: -1px;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="box1">hello</div>
</body>

运行结果

4，opacity不透明度

总结

代码演示

 <style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: orange;
      font-size: 40px;
      opacity: .5;
      font-weight: bold;
    }
    .box2{
      position: relative;
    }
    h1{
      position: absolute;
      top: 100px;
      left: 0px;
      width: 400px;
      background-color: black;
      color: white;
      line-height: 100px;
      text-align: center;
      font-size: 40px;
      opacity: .5;

    }
  </style>
</head>
<body>
  <div class="box1">你好啊</div>
  <div class="box2">
    <img src="../images/你瞅啥.jpg" alt="你瞅啥">
    <h1>你瞅啥</h1>
  </div>
</body>

运行结果