《CSS揭秘》第三章 --形状

小九九的爸爸
205 阅读4分钟

一、开场白

  • 1、写typora习惯了，第二次写掘金还有点茫然，担心排版问题哈哈哈
  • 2、看完本篇博客你肯定会学到一些东西，至于学到什么我就不知道了哈哈哈
  • 3、下面的文字是我的个人总结，如果看纸质书籍看不进去或者感觉乱乱的，不妨来读读我的博客

二、巩固基础

2.1、案例驱动 -- border-radius

<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            div {
                width: 100px;
                height 100px;
                margin-left: 30px;
                margin-top: 30px;
                border-radius: 50%;
                background: steelblue;
            }
        </style>
    </head>
    <body>
        <!--
            实现的效果就是下面的图片
        -->
        <div></div>
    </body>
</html>

border-radius你还记得吗

功能描述如下:

设置边框拐角的圆角样式（一个div有4个拐角）

直观图如下:

语法如下:

/**
    1、border-radius 的取值单位可以是px、%、em
       此时需要注意%，%是相对这个div的盒模型来设置的（盒模型有啥特征你懂的）
    2、X（1-4length|%）: 代表div内的4个圆角的水平半径（左上、右上、右下、左下）
    3、Y（1-4length|%）：代表div内的4个圆角的垂直半径（左上、右上、右下、左下）
    4、属性值简写规则:
       4.1、如果 X 与 Y 的顺序值相等（即X的第i个值 = Y的第i个值），可以只写一遍，eg:
            border-radius: 10% 20% 30% 50%；
       4.2、只针对 X 或者 Y 来说，如果四个值都相等，可以只写一个，eg:
            border-radius: 50% / 10% 20% 30% 60%;
       4.3、只针对 X 或者 Y 来说，如果1和3 或者 2和4 相等，那么可以简写一个值，eg:
            border-radius: 10% 20% / 10% 20% 30% 50%;
       4.4、如果 X的简写值 = Y的简写值，那么此时可以只写一个，eg:(非常重要)
            border-radius: 10% 20%;  <=>  border-radius: 10% 20% 10% 20% / 10% 20% 10% 20%;
       4.5、如果 8 个值全相等，那么可以只写一个值，eg:
            border-radius; 50%;
*/
border-radius: border-radius: X（1-4length|%） / Y（1-4length|%）;

三、形状系列 -- 椭圆

3.1、小试牛刀 -- 生成一个沿水平方向劈开的半椭圆

<! DOCTYPE html>
       <html>
           <head>
               <meta charset="utf-8">
               <title></title>
               <style>
                   * {
                       margin: 0;
                       padding: 0;
                   }
                   html, body {
                       width: 100%;
                       height: 100%;
                   }
                   .div1 {
                       width: 200px;
                       height: 100px;
                       background: #fb3;
                       border-radius: 50%;
                   }
               </style>
           </head>
           <body>
               <div class="div1"></div>
           </body>
       </html>

效果如下:

我们倒是实现了一个椭圆，那么我们如何得到上半身的半椭圆呢？只需做如下改动即可:

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

效果如下:

大功告成，可是有的人该问了，垂直方向为什么不是50%呢，好，我们看一看50%会发生什么变化:

border-radius: 50% / 50% 50% 0 0;

效果图如下:

3.2、举一反三 -- 实现一个1/4 的椭圆

border-radius: 100% 0 0 0;

效果如下:

四、形状系列 -- 梯形

4.1、border质朴系列

<! DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                html, body {
                    width: 100%;
                    height: 100%;
                }
                div {
                    width: 100px;
                    height: 0;
                    text-align: center;
                    border-bottom: 200px solid lightgreen;
                    border-left: 50px solid transparent;
                    border-right: 50px solid transparent;
                }
            </style>
        </head>
        <body>
            <div>梯形</div>
        </body>
    </html>

效果如下:

4.2、伪元素大众系列

 <! DOCTYPE html>
         <html>
             <head>
                 <meta charset="utf-8">
                 <title></title>
                 <style>
                     * {
                         margin: 0;
                         padding: 0;
                     }
                     html, body {
                         width: 100%;
                         height: 100%;
                     }
                     div {
                         width: 200px;
                         height: 100px;
                         background: lightgreen;
                     }
                     div::before {
                         content: "";
                         width: 0;
                         height: 0;
                         border-bottom: 100px solid transparent;
                         border-right: 30px solid lightgreen;
                         transform: rotate(180deg) translate(-200px);
                     }
                     div::after {
                         content: "";
                         display: inline-block;
                         height: 0;
                         width: 0;
                         border-bottom: 100px solid transparent;
                         border-left: 30px solid lightgreen;
                         transform: rotate(180deg) translate(60px);
                     }
                 </style>
             </head>
             <body>
                 <div></div>
             </body>
         </html>

实现效果如下:

方案对比

在生成梯形的时候，第二种方案是最不建议使用的，只能是在最最最迫不得已的时候才会使用它，开挂系列都比这个好使, 方案二的缺点如下:

1、将每个元素仅有的两个伪元素都用上了
2、还要经过相对复杂的变形过程，translateX 还要注意使用%的形式
3、不够DIY，复用性太差

五、形状系列 -- 菱形图片

你需要掌握的技能（不会的可以去看我的博客）

transform 变换属性

5.1、基础形状--菱形的实现

<! DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8">
          <title></title>
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
              html, body {
                  width: 100%;
                  height: 100%;
                  position: relative;
              }
              div {
                  width: 150px;
                  height: 150px;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%) rotate(45deg);
                  background-color: cornflowerblue;
              }
          </style>
      </head>
      <body>
          <div>菱形</div>
      </body>
  </html>

效果如下:

发现

1、好的一面，我们通过transform: rotate 来实现了最简单的菱形, 并且旋转的方向是顺时针旋转
2、坏的一面，transform 会影响到子元素（我们需要将其子元素正过来）

5.2、增加点难度 -- 菱形图片

<! DOCTYPE HTML>
  <html>
      <head>
          <meta charset="utf-8">
          <title></title>
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
              html, body {
                  width: 100%;
                  height: 100%;
                  position: relative;
              }
              div {
                  width: 150px;
                  height: 150px;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  background-color: cornflowerblue;
                  transform: rotate(45deg) translate(-50%, -50%);
                  overflow: hidden;
              }
              div img {
                  width: 100%;
                  height: 100%;
                  transform: rotate(-45deg) scale(1.75) translateX(10%);
              }
          </style>
      </head>
      <body>
          <div>
              <img src="xxx">
          </div>
      </body>
  </html>

效果如下:

六、形状系列 -- 切角效果

切角效果在现在的网站上非常常见，各种类型的都有，比如书签、圆角等等，那么今天我们就来实现1个。先上一个效果图:

你需要掌握的技能（如果有属性不了解的可以去看我的博客）

1、linear-gradient 的用法
2、background-position 的用法
3、background-size 的用法

效果实现:

<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            div {
               width: 300px;
               height: 100px;
               /**
                  下面的background的写法是多重背景的写法，每个背景的位置在最后会通过定位关键字来定位
               */
               background: 
                   linear-gradient(45deg,transparent 40px,rgb(153,205,0) 0) top left,
                   linear-gradient(135deg,transparent 40px,rgb(153,205,0) 0) bottom left,
                   linear-gradient(-135deg,transparent 40px,rgb(153, 205, 0) 0) left right,
                   linear-gradient(-45deg,transparent 40px,rgb(153, 205, 0) 0) bottom right;
               background-size: 50% 50%;
               background-repeat: no-repeat;
             }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

七、开挂系列之clip-path

7.1、属性描述

门派: 毁天灭地流
作用: 在制作形状这方面只有你想不到的，没有它做不到的
上手难度: 2星
掌门人: circle、ellipse、inset、polygon

7.2、掌门人1 -- circle

clip-path: circle(半径 at 圆心位置);

小试牛刀:

<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            div {
                width: 200px;
                height: 200px;
                margin-top: 50px;
                margin-left: 50px;
                clip-path: circle(50% at 50% 50%);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果如下:

7.3、半斤八两的矩长老（掌门2） -- inset

clip-path: inset(要显示的区域距离上右下左的距离 round 上右下左圆角半径);

小试牛刀:

<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            div {
                width: 200px;
                height: 200px;
                margin-left: 50px;
                margin-top: 50px;
                background: rgb(153, 205, 0);
                /**
                   1、简写方式跟border-radius一样
                   2、要显示的图形距离div上面0px，要显示的图形的左上圆角弧度为0px
                      要显示的图形距离div右面0px，要显示的图形的右上圆角弧度为0px
                      要显示的图形距离div下面0px，要显示的图形的右下圆角弧度为0px
                      要显示的图形距离div左面0px，要显示的图形的左下圆角弧度为0px
                   3、综上分析，要显示的就是这个div标签，哈哈哈
                */
                clip-path: inset(0 round 0);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果如下:

7.4、虚张声势的掌门人3 -- ellipse

评价: 说它虚张声势是因为它除了名字难记以外，似乎就没啥了，展现形式跟前2个掌门人一样

clip-path: ellipse(水平半径 垂直半径 at 椭圆的圆心);

7.4、有点东西的掌门人4 -- polygon

这4个掌门人里面就属它还有点东西

clip-path: polygon(<距离左上角的x轴长度 距离左上角的y轴长度>, <一样的...>);

八、本章完结

我试图将这本书所讲解的知识点用大白话的形式展现出来。第二次写掘金还是有点不适应哈哈哈。

avatar
文章
阅读
粉丝