zoukankan      html  css  js  c++  java
  • 形状

    自适应的椭圆

    border-radius: 50% / 50%;  =>    border-radius: 50%;

    自适应半椭圆

    横向: border-radius: 50% / 100% 100% 0 0;

    纵向: border-radius: 100% 0 0 100% / 50%;

    平行四边形

    以嵌套元素方案解决

    .button { transform: skewX(-45deg); }

    .button > div { transform: skewX(45deg); }

    使用伪元素解决

    .button {

    position: relative;   其他的文字颜色、内边距等样式……

    }

    .button::before {

    content: '';      用伪元素来生成一个矩形

    position: absolute;

    top: 0; right: 0; bottom: 0; left: 0;

    z-index: -1;

    background: #58a;

    transform: skew(45deg);

    }

    当变形一个元素样式而不想变形它的内容时都可用伪元素方式解决。

    菱形

    基于变形的方案

    .picture {

    400px;

    transform: rotate(45deg);

    overflow: hidden;

    }

    .picture > img {

    max- 100%;

    transform: rotate(-45deg) scale(1.42);

    }

    通过裁剪路径clip-path实现

    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

    切角效果

    使用渐变实现切角效果

    background: #58a;

    background: linear-gradient(-45deg, transparent 15px, #58a 0) right,

    linear-gradient(45deg, transparent 15px, #58a 0) left;

    background-size: 50% 100%;

    background-repeat: no-repeat;

    使用弧形切角

    background: #58a;

    background:

    radial-gradient(circle at top left,transparent 15px, #58a 0) top left,

    radial-gradient(circle at top right,transparent 15px, #58a 0) top right,

    radial-gradient(circle at bottom right,transparent 15px, #58a 0) bottom right,

    radial-gradient(circle at bottom left,transparent 15px, #58a 0) bottom left;

    background-size: 50% 50%;

    background-repeat: no-repeat;

  • 相关阅读:
    视图创建
    根据表格作业题
    表格 作业题练习
    创建表格 练习题
    聚合函数、数学函数、日期时间函数
    接口自动化框架
    python+request+Excel 几十份接口测试用例一起自动化测试的接口测试框架
    python3 函数
    pip源头
    爬虫
  • 原文地址:https://www.cnblogs.com/cuiwan/p/10515665.html
Copyright © 2011-2022 走看看