css 技巧

半透明边框

代码

border:10px solid hsla(0, 0%, 100%, 5);
background: white;
background-clip: padding-box;

效果

多重边框

代码

 width: 200px;
 height: 200px;
 background: yellowgreen;
 border: 10px solid #655;
 outline: 5px solid deeppink;

效果

边框内圆角

代码

 <div class="box">
     <div>隋唐五代十国，宋元明清</div>
 </div>
  .box {
        width: 200px;
        height: 200px;
        margin: 100px auto 0;
        background: #655;
        padding: .8em;
      }
      .box > div {
        background: tan;
        border-radius: .8em;
        padding: 1em;
        box-shadow: 0 0 0 .6em #655;
        outline: .6em solid #655;
      }

效果

条纹背景

代码

  width: 200px;
  height: 200px;
  background: linear-gradient(#fb3 33.3%, #58a, 0, #58a, 66.6%, yellowgreen 0 );
 background-size: 100% 45px;

效果

垂直条纹

代码

垂直条纹的代码和水平条纹几乎一致，差别主要在于：我们需要在开头加上一个额外的参数来指定渐变的方向，在水平条纹的代码中，我们也可以加上这个参数，只不过它的默认值to/bottom 本来跟我们的意图一致，主要的代码如下：

width: 200px;
height: 200px;
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

效果

斜向条纹

代码

  width: 200px;
  height: 200px;
  background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%, #fb3 0 , #fb3 75%, #58a 0);
  background-size: 42.42px 42.42px;

效果

同色系条纹

代码

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

效果