【新拟态】左上角标签样式、ICON图标样式、模仿AppStore的应用图标

你挚爱的强哥

已于 2022-02-25 12:34:02 修改

阅读量5.5k

点赞数

分类专栏： CSS2/CSS3/LESS/SASS/SCSS/HTML 文章标签： css css3 html

于 2020-06-30 10:28:01 首次发布

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

本文链接：https://blog.csdn.net/qq_37860634/article/details/107034976

版权

这篇博客介绍了如何使用CSS3和HTML来创建新拟态风格的左上角标签样式以及模仿AppStore应用图标的技巧。通过结合CSS的边框和阴影效果，实现了这种现代感十足的界面设计元素。

摘要由CSDN通过智能技术生成

效果如图↑

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>body {
        background: #eeeff2;
    }

    /*左上角标签，父元素必须设置position: relative;overflow: hidden;height: 大于150;width: 大于150px;，同时，角标标签内加入属性superscript-title="左上角标签文字内容"*/
    .subscript:after {
        position: