過渡即時設置邊框，緩慢顯示

-1

目前我有圖像作爲複選框，我可以點擊然後黃色邊框出現過渡。過渡即時設置邊框，緩慢顯示

顯然，當邊界出現，所以我設置3px至極的默認保證金消失時，邊界正在添加它改變了保證金的東西，一切（邊框是3px的太）但因爲我使用過渡到邊境它長大了，而邊界越來越大，所有的圖像都在關閉和晃動：D

所以，現在我不得不使3px的邊界立即在那裏，只要我輕彈它，但它不應該立即顯示爲3px .. 。我不知道該怎麼做，這裏是我目前的css

theres一小部分的CSS缺少，但堆棧overf低不讓我上傳它，因爲它不接受它的代碼....

img{ 
 
     width: 100%; 
 
     max-width: 380px; 
 
     border: 3px solid rgba(255.0.0.0); 
 
     background-color:black; 
 
     height: 100%; 
 
     max-height: 250px; 
 
     margin: 3px; 
 
     border-radius:15px; 
 
     transition:opacity 2s ease, border 1s ease; 
 
     opacity: 0.5; 
 
    }

<img src="http://placehold.it/380x250" />

來源

2015-07-10 Econ

這是相當難以真正瞭解你想要什麼。但是你總是可以在transition屬性中添加'margin 1s ease'。您還可以顯示'img：hover'的css或用於觸發更改的內容。 – stevenw00

你應該閱讀如何在這裏輸入代碼 - 我可以看到你缺少縮進。 *任何*代碼應以4個空格開始，以解釋爲代碼。 – wiktus239

添加代碼來說明和澄清你的q。 – davidcondrey

爲什麼不只是有邊界那裏transparent以及剛剛轉型的``邊框color`？

img { 
 
    width: 100%; 
 
    max-width: 380px; 
 
    border: 3px solid transparent; 
 
    height: 100%; 
 
    max-height: 250px; 
 
    margin: 3px; 
 
    border-radius: 15px; 
 
    transition: opacity 2s ease, border-color 1s ease; 
 
    opacity: 0.5; 
 
    } 
 
    img:hover { 
 
    border-color: red; 
 
    }

<img src="http://placehold.it/200x200" />

來源

2015-07-10 09:42:00

如果你想不打破布局，同時加入邊框，您可以考慮使用

的box-shadow

代替border屬性，並過渡這一點。

$('.box').on('click', function() { 
 
    $(this).addClass('box--checked'); 
 
});

.box { 
 
    width: 120px; 
 
    height: 120px; 
 
    transition: box-shadow .3s linear; 
 
    margin-bottom: 12px; 
 
    background-color: #DDD; 
 
    box-shadow: 0px 0px 0px 0px darkorange; 
 
} 
 
.box--checked { 
 
    box-shadow: 0px 0px 0px 6px darkorange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="box box--one">A</div> 
 
<div class="box box--two">B</div> 
 
<div class="box box--three">C</div>

來源

2015-07-10 09:02:02 wiktus239

過渡即時設置邊框，緩慢顯示

回答

相關問題