旋转木马、文字阴影、兄弟关系外间距塌陷问题、css伪元素

最新推荐文章于 2024-07-22 11:58:10 发布

曲靖花式通幽处

最新推荐文章于 2024-07-22 11:58:10 发布

阅读量64

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_69474097/article/details/126045361

版权

旋转木马

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 200px;
      height: 300px;
      margin: 100px auto;
      /* 子绝父相 */
      position: relative;

      perspective: 1000px;
    }

    .wrap div {
      width: 200px;
      height: 300px;
      position: absolute;
      top: 0;
      left: 0;
      border: 2px solid tomato;
      text-align: center;
      line-height: 300px;
      font-size: 30px;
    }

    .wrap div:nth-child(1) {
      transform: translateZ(300px);
    }

    .wrap div:nth-child(2) {
      transform: rotateY(45deg) translateZ(300px);
    }

    .wrap div:nth-child(3) {
      transform: rotateY(90deg) translateZ(300px);
    }

    .wrap div:nth-child(4) {
      transform: rotateY(135deg) translateZ(300px);
    }

    .wrap div:nth-child(5) {
      transform: rotateY(180deg) translateZ(300px);
    }

    .wrap div:nth-child(6) {
      transform: rotateY(225deg) translateZ(300px);
    }

    .wrap div:nth-child(7) {
      transform: rotateY(270deg) translateZ(300px);
    }

    .wrap div:nth-child(8) {
      transform: rotateY(315deg) translateZ(300px);
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</body>

</html>

文c

.box{ text-shadow: 5px 5px 2px #ff0, -5px -5px 2px skyblue;}

可以在一个文字中设置一个或多个阴影，阴影之间用逗号隔开

兄弟关系外间距塌陷问题

兄弟关系外间距塌陷问题
        现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；
        两个值一样大，取当前值
        两个值不同，取较大值
        原因：并列关系的两个元素共用了一个外间距区域
        解决办法：
        分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'
         .box1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-bottom: 50px;

        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;


        }

        .father1,
        .father2 {
            overflow: hidden;
        }
     <div class="father1">
        <div class="box1"></div>
    </div>
    <div class="father2">
        <div class="box2"></div>
    </div>

css伪元素

1）什么是伪元素

用css语言创造出来的标签

伪元素创造的标签是行级标签

2）如何创建伪元素

- element::before{ content:"伪元素的文本内容"; 属性名: 属性值; } 
  element元素内部，内容之前，添加“伪元素的文本内容”
- element::after{ content:"伪元素的文本内容"; 属性名: 属性值; } 
  element元素内部，内容之后，添加“伪元素