css3新增模块

ps笔记

已于 2022-07-11 22:38:40 修改

阅读量175

点赞数

文章标签： css3 前端

于 2022-07-11 17:40:25 首次发布

本文链接：https://blog.csdn.net/lv_suri/article/details/125726175

版权

边框圆角
阴影
形变：旋转，缩放，位移
过度效果
动画效果
媒体查询
Flex布局
Grid布局
等等（选择器还可以自定义字体）

新增加圆角功能：border-radius:左上右上右下左下

<style>
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    border-radius: 30px;
  }
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

阴影： box-shadow: 10px 20px 30px blue

参考x轴，y轴，模糊半径，建议阴影颜色不要设置黑色

<style>
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    border-radius: 30px;
    background-color: red;
    /* 10px表示向右移动距离，20px是向下移动的距离，30px是羽化的效果值越大羽化越大 */
    box-shadow: 10px 20px 30px blue;
  }
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

形变：

transform:

rotate（）；旋转 deg单位表示角度

scale（）；缩放

translate();位移

<style>
      .box{
        width: 100px;
        height: 100px;
        background-color: red ;
        /* 圆角 */
        border:1px solid red;
        border-radius: 4opx;
        /* 阴影 */
        background-color: red;;
        box-shadow: 10px 20px 30px 50px blue;
        /* 形变 */
        /* transform: rotate(45deg);
        transform:scale(0.5);
        transform:translate(50px,100px); */
        /* 旋转后位移 */
        /* transform:rotate(45deg) translate(50px,100px); */
          }
          /* 鼠标移入旋转后位移 */
      .box:hover{
        transform: rotate(45deg) scale(0.5);
      }
  </style>
</head>
<body>
    <div class="box"><h1>hello</h1></div>
    
</div>
</body>
</html>

案例：水平居中

 <style>
      .box{
            width:500px;
            height: 200px;
            background-color: red ;
            /* margin: 0 auto; */
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
          }
   
      /* 让一个元素在网页中水平居中 */
  </style>
</head>
<body>
    <div class="box"><h1>hello</h1></div>
    
</div>
</body>
</html>

案例：让一个蓝色的正圆垂直水平居中显示，正圆直径是100px,阴影是红色是10px.

  <style>
      .box{
            width:100px;
            height: 100px;
            background-color: blue ;
            /* margin: 0 auto; */
            position: absolute;
            border-radius: 50%;
            top:50%;
            left: 50%;
            box-shadow: 10px 10px 10px red;
            transform: translate(-50%,-50%);
          }
  </style>
</head>
<body>
    <div class="box"></div>
    </div>
</body>
</html>