神奇的《css揭祕》第二章筆記

原來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);
   }
複製代碼