Вопросы Теги

Одиночная вращающаяся пунктирная граница примерно 3 раза подряд < td >

В Java чтение и запись 32-битных или меньших величин гарантированно будет атомарным. Под атомом мы подразумеваем, что каждое действие происходит за один шаг и не может быть прервано. Таким образом, когда у нас есть многопоточные приложения, операции чтения и записи являются потокобезопасными и их не нужно синхронизировать.

Например, следующий код является потокобезопасным: 

public class ThreadSafe   
  {  
    private int x;  
    public void setX(int x)  
          {
           this.x = x;
           } 
  }
0
задан Tissi_2 28 February 2019 в 15:07
поделиться

1 ответ

Вы можете использовать псевдоэлемент, в котором вы применяете анимацию с пунктирной рамкой 

.inner_wrap {
  max-width: 1140px;
  margin: 0 auto;
}

html,
body {
  font-family: 'Asap', sans-serif;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.boundary {
  width: 5%;
  height: 50px;
  background-color: steelblue;
}

.occupied0 {
  background-color: #1b4d15;
  color: #fff;
}

.occupied1 {
  background-color: red;
  color: #FFF;
}

.short {
  width: 32%;
  height: 40px;
  display: block;
  margin: 10px 0px 10px 10px;
  line-height: 40px;
  text-align: left;
  padding-left: 10%;
}

.long {
  width: 76%;
  height: 40px;
  display: block;
  margin: 10px 0px 10px 10px;
  line-height: 40px;
  text-align: left;
  padding-left: 10%;
}

td.range_supervisor {
  background-color: #663300;
  width: 12%;
  padding: 35px;
  background-clip: content-box;
}

table {
  background-color: white;
  text-align: left;
  border: 0px;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

table>tr>td {
  width: 25%;
}

tr:first-child td:first-child:before {
    content:"";
    position:absolute;
    top:0;
    left:20px;
    right:20px;
    height:60px;
      background: 
        linear-gradient(90deg, blue 50%, transparent 50%) 0 0, 
        linear-gradient(90deg, blue 50%, transparent 50%) 100% 100%, 
        linear-gradient(0deg, blue 50%, transparent 50%) 100% 0, 
        linear-gradient(0deg, blue 50%, transparent 50%) 0 100%;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  transition: background-position 2s;
}

tr:first-child:hover td:first-child:before{
    background-position: 200px 0, calc(100% - 200px) 100%, 100% 50px,0 calc(100% - 50px);
}
<table class="inner_wrap">
  <tr>
    <td>
    </td>
    <td style="width:25%;">
      <button>RANGE 1</button>
    </td>
    <td class="boundary"></td>
    <td id="range1" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 2</button>
    </td>
    <td class="boundary"></td>
    <td id="range2" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 3</button>
    </td>
    <td class="boundary"></td>
    <td id="range3" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 4</button>
    </td>
    <td class="boundary"></td>
    <td id="range4" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td class="range_supervisor" rowspan="4">
      <button style=" 	writing-mode: vertical-lr;
  	text-orientation: upright;">supervisor</button>
    </td>
    <td>
      <button>RANGE 5</button>
    </td>
    <td class="boundary"></td>
    <td id="range5" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
      <button>RANGE 6</button>
    </td>
    <td class="boundary"></td>
    <td id="range6" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
      <button>RANGE 7</button>
    </td>
    <td class="boundary"></td>
    <td id="range7" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
      <button>RANGE 8</button>
    </td>
    <td class="boundary"></td>
    <td id="range8" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 9</button>
    </td>
    <td class="boundary"></td>
    <td id="range9" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 10</button>
    </td>
    <td class="boundary"></td>
    <td id="range10" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 11</button>
    </td>
    <td class="boundary"></td>
    <td id="range11" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 12</button>
    </td>
    <td class="boundary"></td>
    <td id="range12" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
</table>

0
ответ дан Temani Afif 28 February 2019 в 15:07
поделиться
Другие вопросы по тегам:

Похожие вопросы: