zoukankan      html  css  js  c++  java
  • CSS揭秘(二背景与边框)

    一、半透明边框

    关键词:background-clip

    .bantouming {
        width: 200px;
        height: 200px;
        background: darkmagenta;
        border: 10px dashed rgb(5, 42, 165);
        display: flex;
        background-clip: border-box;
      }
    
      .bantouming .bantouming_div {
        width: 100px;
        height: 100px;
        margin: auto;
        border: 10px solid hsla(0, 0%, 100%, .5);
        background: white;
        background-clip: padding-box;
      }
    <div class="bantouming">
        <div class="bantouming_div">半透明边框</div>
      </div>

    二、多重边框

    关键词:box-shadow,outline

    .duochong {
        width: 200px;
        height: 200px;
        margin: 30px;
        background: yellowgreen;
        box-shadow: 0 0 0 10px #655,
          0 0 0 15px deeppink,
          0 2px 5px 15px rgba(0, 0, 0, .6);
      }
    
      .duochong1 {
        width: 200px;
        height: 200px;
        margin: 30px;
        background: yellowgreen;
        box-shadow: 0 0 0 10px #655 inset,
          0 0 0 15px deeppink inset,
          0 2px 5px 15px rgba(0, 0, 0, .6) inset;
      }
    
      .duochong2 {
        width: 200px;
        height: 200px;
        margin: 30px;
        background: yellowgreen;
        border: 10px solid #655;
        outline: 5px solid deeppink;
      }
    
      .duochong3 {
        width: 200px;
        height: 200px;
        margin: 30px;
        background: yellowgreen;
        border: 10px solid #655;
        outline: 1px dashed deeppink;
        outline-offset: -30px;
      }
      <div class="duochong">多重边框</div>
      <div class="duochong1">多重边框</div>
      <div class="duochong2">多重边框</div>
      <div class="duochong3">多重边框</div>

    三、背景定位

    关键词:background-origin,background-position

    .beijing {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: url(timg.jpeg) no-repeat #58a;
        background-size: 200px 200px;
        background-position: right 20px bottom 10px;
      }
    
      .beijing1 {
        width: 300px;
        height: 300px;
        margin: 50px;
        padding: 10px;
        background: url(timg.jpeg) no-repeat #58a bottom right;
        background-size: 200px 200px;
        /* 或 100% 100% */
        background-origin: content-box;
      }
    
      .beijing2 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: url(timg.jpeg) no-repeat #58a;
        background-size: 200px 200px;
        background-position: calc(100% - 20px) calc(100% - 10px);
      }
      <div class="beijing"></div>
      <div class="beijing1"></div>
      <div class="beijing2"></div>

    四、边框内圆角

    关键词:勾股定理

    .yuanjiao {
        background: tan;
        border-radius: 20px;
        padding: 100px;
        margin: 50px;
        box-shadow: 0 0 0 10px #655;
        outline: 20px solid #655;
      }
    <div class="yuanjiao"></div>

     

    五、条纹背景

    关键词:渐变

    <div class="tiaowen"></div>
      <div class="tiaowen1"></div>
      <div class="tiaowen2"></div>
      <div class="tiaowen3"></div>
      <div class="tiaowen4"></div>
      <div class="tiaowen5"></div>
    <div class="tiaowen6"></div>
      <div class='tongsexi'></div>
    .tiaowen {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: linear-gradient(#fb3 50%, #58a 50%);
        background-size: 100% 30px;
      }
    
      .tiaowen1 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: linear-gradient(#fb3 30%, #58a 0);
        background-size: 100% 30px;
      }
    
      .tiaowen2 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: linear-gradient(#fb3 33.3%,
            #58a 0, #58a 66.6%, yellowgreen 0);
        background-size: 100% 45px;
      }
    
      .tiaowen3 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: linear-gradient(to right,
            /* 或 90deg */
            #fb3 50%, #58a 0);
        background-size: 30px 100%;
      }
    
      .tiaowen4 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: linear-gradient(45deg,
            #fb3 25%, #58a 0, #58a 50%,
            #fb3 0, #fb3 75%, #58a 0);
        background-size: 30px 30px;
      }
    
      .tiaowen5 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: linear-gradient(45deg,
            #fb3 25%, #58a 0, #58a 50%,
            #fb3 0, #fb3 75%, #58a 0);
        background-size: 42.426406871px 42.426406871px;
      }
    
      .tiaowen6 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: repeating-linear-gradient(45deg,
            #fb3, #fb3 15px, #58a 0, #58a 30px);
      }
    
      .tongsexi {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: #58a;
        background-image: repeating-linear-gradient(30deg,
            hsla(0, 0%, 100%, .1),
            hsla(0, 0%, 100%, .1) 15px,
            transparent 0, transparent 30px);
      }

    六、复杂背景

    关键词:渐变

    <div class="wangge1"></div>
      <div class="wangge2"></div>
      <div class="wangge3"></div>
      <div class="bodian1"></div>
      <div class="bodian2"></div>
      <div class="bodian3"></div>
      <div class="qipan"></div>
    .wangge1 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: white;
        background-image: linear-gradient(90deg,
            rgba(200, 0, 0, .5) 50%, transparent 0),
          linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
        background-size: 30px 30px;
      }
    
      .wangge2 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: #58a;
        background-image:
          linear-gradient(white 1px, transparent 0),
          linear-gradient(90deg, white 1px, transparent 0);
        background-size: 30px 30px;
      }
    
      .wangge3 {
        width: 300px;
        height: 300px;
        margin: 50px;
        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;
      }
    
      .bodian1 {
        width: 300px;
        height: 300px;
        margin: 50px;
        background: #655;
        background-image: radial-gradient(tan 30%, transparent 0);
        background-size: 30px 30px;
      }
    
      .bodian2 {
        width: 300px;
        height: 300px;
        margin: 50px;
        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;
      }
    
      .qipan {
        width: 300px;
        height: 300px;
        margin: 50px;
        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;
      }
    
      .suiji {
        width: 700px;
        height: 400px;
        margin: 50px;
        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%;
      }

    七、随机背景

    关键词:质数

    .suiji {
        width: 700px;
        height: 400px;
        margin: 50px;
        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%;
      }
    <div class="suiji"></div>

    八、连续的图像边框

    关键词:渐变

    .lianxu {
        margin: 50px;
        padding: 20px;
        border: 20px solid transparent;
        background: linear-gradient(white, white),
          url(stone.png);
        background-size: cover;
        background-clip: padding-box, border-box;
      }
    
      .lianxu1 {
        margin: 50px;
        padding: 20px;
        border: 20px solid transparent;
        /* background: linear-gradient(white, white),
          url(stone.png);
        background-size: cover;
        background-clip: padding-box, border-box;
        background-origin: border-box; */
        background:
          linear-gradient(white, white) padding-box,
          url(stone.png) border-box 0 / cover;
      }
    
      .lianxu2 {
        margin: 50px;
        padding: 1em;
        border: 1em solid transparent;
        background: linear-gradient(white, white) padding-box,
          repeating-linear-gradient(-45deg,
            red 0, red 12.5%,
            transparent 0, transparent 25%,
            #58a 0, #58a 37.5%,
            transparent 0, transparent 50%) 0 / 5em 5em;
      }
    
      @keyframes ants {
        to {
          background-position: 100%
        }
      }
    
      .lianxu3 {
        margin: 50px;
        padding: 1em;
        border: 1px solid transparent;
        background:
          linear-gradient(white, white) padding-box,
          repeating-linear-gradient(-45deg,
            black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
        animation: ants 12s linear infinite;
      }
    <div class="lianxu">连续的图像边框连续的图像边框连续的图像边框连续的图像边框连续的图像边框</div>
      <div class="lianxu1">连续的图像边框连续的图像边框连续的图像边框连续的图像边框连续的图像边框</div>
      <div class="lianxu2">连续的图像边框连续的图像边框连续的图像边框连续的图像边框连续的图像边框</div>
      <div class="lianxu3">连续的图像边框连续的图像边框连续的图像边框连续的图像边框连续的图像边框</div>

    最后:border-image 是如何工作的

     结尾:从css揭秘学习

  • 相关阅读:
    MySQL 5.7.19 CentOS 7 安装
    cocos2d-x JS 弹出对话框触摸监听(吞噬点击事件遮挡层)
    cocosStudio制作ScrollView并在cocos2dx 3.0中使用。
    cocos2dx JS 游戏切到后台再进入游戏的处理
    使用Eclipse出现make: *** No rule to make target `all'. Stop.解决办法
    cocos2dx 3.13 在Mac平台下配置安卓环境变量
    (已解决)Eclipsez中打不开c++文件,显示Editor could not be initialized.
    延期版本webstorm(解决许可证过期,注册,激活,破解,码,支持正版,最新可用)
    cocos2dx JS 层(Layer)的生命周期
    Cocos2d-JS studio基础控件的使用
  • 原文地址:https://www.cnblogs.com/forever-xuehf/p/12920026.html
Copyright © 2011-2022 走看看