原来css还可以这样玩《css揭秘》第二章

摸鱼期间实在无聊，读了一下这本css揭秘，才发现css有这么多新奇的用法，故想记录下来。作者一共讲了47个css技巧，都很有趣巧妙，不得不感叹，我再也不敢说自己会css啦！

1 背景与边框

1.1半透明边框

p {
    margin: 0;
    padding: 0;
   }

   body {
    background: url(./img/background.jpg) no-repeat;
    background-size: cover;
   }

   .content {
    position: relative;
    margin: 100px auto;
    width: 200px;
    height: 200px;
    border: 20px solid hsla(0, 10%, 100%, .5);
    background-color: #fff;
    background-clip: padding-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
   }
      
      <section class="content">
   <p>每个追求者都向往成功。在成功的牵引下，人能够被激励、鞭策，奋发向上，向美好的目标挺进。</p>
  </section>

效果如下

1.2多重边框

div {
    width: 100px;
    height: 100px;
    margin: 20px;
    background: yellowgreen;
    /*box-shadow方法  */
    box-shadow: 0 0 0 10px #655,
     0 0 0 15px deeppink,
     0 2px 5px 15px rgba(0, 0, 0, .6);
    /* outline方法 */
    /* border: 10px solid #655;
     outline: 5px solid deeppink; */
   }

1.3灵活的背景定位

background-position 的扩展语法方案

div {
    height: 100vh;
    background: url(./img/dong.png) no-repeat bottom right #58a;
    background-position: right 20px bottom 20px;
   }

background-origin 方案

div{
    padding: 20px;
    background: url(./img/dong.png) no-repeat #58a;
    bottom right; 
    background-origin: content-box;
}
       

calc() 方案

div{
    background: url(./img/dong.png) no-repeat #58a;
    background-position: calc(100% - 20px) calc(100% - 10px);
}

1.4边框内圆角

div {
    background: tan;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em #655;
    outline: .6em solid #655;
   }

1.5条纹背景

div {
    height: 100vh;
    background: linear-gradient(#fb3 50%, #58a 50%);
    background-size: 100% 30px;
   }

我们还可以用相同的方法来创建不等宽的条纹，只需调整色标的位置值 即可

div {
    height: 100vh;
    background: linear-gradient(#fb3 60%, #58a 60%);
    background-size: 100% 30px;
   }

还有更简便的方法

background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

三种颜色的，同理

div {
    height: 100vh;
    background: linear-gradient(#fb3 33.3%,
    #58a 0, #58a 66.6%, yellowgreen 0);
    background-size: 100% 45px;
   }

垂直条纹

div {
    height: 100vh;
    background: linear-gradient(to right, /* 或 90deg */
    #fb3 50%, #58a 0);
    background-size: 30px 100%;
   }

斜向条纹

div {
    height: 100vh;
    background: repeating-linear-gradient(60deg,
    #fb3, #fb3 15px, #58a 0, #58a 30px);
   }

同色系条纹

div {
    height: 100vh;
    background: #58a;
    background-image: repeating-linear-gradient(30deg,
    hsla(0,0%,100%,.1),
    hsla(0,0%,100%,.1) 15px,
    transparent 0, transparent 30px);
   }

1.6复杂的背景图案

网格

div {
    height: 100vh;
    background: #58a;
    background-image:
    linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0),
    linear-gradient(hsla(0,0%,100%,.3) 1px,
    transparent 0),
    linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,
    transparent 0);
    background-size: 75px 75px, 75px 75px,
    15px 15px, 15px 15px;
   }

波点

div {
    height: 100vh;
    background: #655;
    background-image: radial-gradient(tan 30%, transparent 0),
    radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
   }

棋盘

div {
    height: 100vh;
    background: #eee;
    background-image: linear-gradient(45deg,
      rgba(0, 0, 0, .25) 25%, transparent 0,
      transparent 75%, rgba(0, 0, 0, .25) 0),
     linear-gradient(45deg,
      rgba(0, 0, 0, .25) 25%, transparent 0,
      transparent 75%, rgba(0, 0, 0, .25) 0);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
   }

1.7伪随机背景

div {
    height: 100vh;
    background: hsl(20, 40%, 90%);
    background-image:
    linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 41px, transparent 0);
    background-size: 41px 100%, 61px 100%, 83px 100%;
   }

1.8连续的图像边框

div {
    height: 30vh;
    padding: 1em;
    border: 16px solid transparent;
    border-image: 16 repeating-linear-gradient(-45deg,
    red 0, red 1em,
    transparent 0, transparent 2em,
    #58a 0, #58a 3em,
    transparent 0, transparent 4em);
   }