【day11】關於CSS outline屬性

2019 iT 邦幫忙鐵人賽

DAY 10

自我挑戰組

CSS、JS-30天研究筆記系列第 11 篇

2019鐵人賽

Amy

2018-10-11 23:53:27

7751 瀏覽

分享至

一、特性：

與用戶體驗息息相關，如： focus 狀態以及键盤訪問的狀態效果
不占任何空間，不影響元素的布局
設置方式類似border，不同的是無法指定方向（left right top bottom）

二、依網頁風格重置focus效果：

<style>
  input{
    outline: 0;
  }
  input:focus{
    border-color: #ff6;
    box-shadow: 1px 2px 1px #996;
  }
</style>
<body>
  <input type=" text">  
</body>

三、自動填滿螢幕剩餘空間的應用技巧：

<style> 
  .footer {
     height: 50px;
    }
    .footer > p {
      position: absolute;
      left: 0; right: 0;
      text-align: center;
      margin-top: 50vh;
      padding: 15px 0;
      background-color: #a0b3d6;
      outline: 9999px solid #a0b3d6;
      clip: rect(0 9999px 9999px 0);/*因為outline無法指定方向，所以用clip剪裁掉上方被outline覆蓋的部分*/
    } 
  </style>
  <div class="footer">
      <p> ©2018 ABC</p>
  </div>

【day10】CSS堆疊順序(stacking order)

【day12】關於CSS與文字設定相關的屬性

系列文

CSS、JS-30天研究筆記共 31 篇

RSS系列文訂閱系列文

23 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

CSS、JS-30天研究筆記系列 第 11 篇

【day11】關於CSS outline屬性

尚未有邦友留言

標記使用者

CSS、JS-30天研究筆記系列第 11 篇