• h5-伪元素-before和after


    做一个门票或者邮票:效果图

    1.html就是两个div

    2.具体css代码

     1     <style>
     2         /*左侧长方体基本样式*/
     3         div:nth-of-type(1){
     4             width: 300px;
     5             height: 200px;
     6             background-color: red;
     7             float: left;
     8         }
     9         /*右侧长方体基本样式*/
    10         div:nth-of-type(2){
    11             width: 100px;
    12             height: 200px;
    13             background-color: blue;
    14             float: left;
    15             position: relative;
    16         }
    17         /*第一个伪元素:before是遮盖上边缘的圆形,当然也可以是别的形状*/
    18         div:nth-of-type(2)::before{
    19             /*必须添加content属性,否则后期看不到*/
    20             content: "";
    21             /*默认是行级元素,如果想设置宽高,必须转换成块级元素*/
    22             position: absolute;
    23             width: 20px;
    24             height: 20px;
    25             background-color: #fff;
    26             border-radius: 10px;
    27             left: -10px;
    28             top: -10px;
    29         }
    30         /*第一个伪元素:after是遮盖下边缘的圆形,同上也可以是别的形状*/
    31         div:nth-of-type(2)::after{
    32             /*必须添加content属性,否则后期看不到*/
    33             content: "";
    34             /*默认是行级元素,如果想设置宽高,必须转换成块级元素*/
    35             position: absolute;
    36             width: 20px;
    37             height: 20px;
    38             background-color: #fff;
    39             border-radius: 10px;
    40             left: -10px;
    41             bottom: -10px;
    42         }
    43     </style>
  • 相关阅读:
    Linux平台下卸载MySQL的方法
    Linux自带mariadb卸载
    ubuntu下mysql的安装
    Java基础-方法区以及static的内存分配图
    Linux新建用户后的必要设置
    vim 个性化设置和操作
    centos6 下查看SELinux状态 关闭SELinux
    查看CentOS版本信息
    Linux下 tar 命令详解
    linux下 利用 rz 命令上传文件
  • 原文地址:https://www.cnblogs.com/FengBrother/p/11373093.html
Copyright © 2020-2023  润新知