OVERFLOW應用

産生卷軸

原理:超出元素範圍内的東西,用卷軸方式呈現

<div class="card">
 <div class="circle"></div>
 <div class="square"></div>
</div>
.card{
width: 350px; height: 200px;
background-color: #EEF5DB;
position: relative;
overflow: scroll;
}

.circle{
 width: 50px; height: 50px;
 border: solid 3px #4F6367;
 border-radius: 100%;
 position: absolute;
 right: -20px;
 top: -20px;
}

.square{
 width: 70px; height: 70px;
 background-color: #4F6367;
 position: absolute;
 top: 180px;
 right: 30px;
}

Display

.
.

隱藏框外的東西

原理:超出元素範圍内的東西,給隱藏掉

<div class="card">
 <div class="circle"></div>
 <div class="square"></div>
</div>
.card{
width: 350px; height: 200px;
background-color: #EEF5DB;
position: relative;
overflow: hidden;
}

.circle{
 width: 50px; height: 50px;
 border: solid 3px #4F6367;
 border-radius: 100%;
 position: absolute;
 right: -20px;
 top: -20px;
}

.square{
 width: 70px; height: 70px;
 background-color: #4F6367;
 position: absolute;
 top: 180px;
 right: 30px;
}

Display

.
.

 

Leave a Reply

Your email address will not be published. Required fields are marked *