CSS邊框和動畫

enter image description here CSS邊框和動畫

<div id="parent"> 
<div id="left"></div> 
<div id="right></div> 
</div>

和CSS：

#left{ 
border-right:solid 1px black; 
border-bottom-right-radius:10px; 
} 
#right 
{ 
border-top:solid 1px black; 
border-top-left-radius:10px; 
}

這是我在頁面上邊框的樣子，但我不能圖如何頂得上擺脫這種事，右側的div的左上角的邊框半徑設置爲10px，左側的div右下角的設置爲相同的ammount。現在問題是它們之間的邊界，它被左邊的div和頂部所保留，我不想讓它看到一個小小的殘留物，我該如何擺脫這個問題？

第二：嘗試css3動畫，一旦它一直運行（我改變了懸停的寬度）它跳回原來的...我怎麼能使它的寬度會改變，但只有一旦鼠標關閉，請返回？動畫代碼：

@keyframes btn 
{ 
0%{width:80%} 
1000%{width:100%} 
} 
@-webkit-keyframes btn 
{ 
0%{width:80%} 
100%{width:100%} 
} 
.button:hover 
{ 
animation:btn 1s; 
}

來源

2013-08-21 user1126068

這是兩個問題，這是應該的，EHM，兩個問題。兩個問題都有同樣的問題。你有什麼嘗試？你有什麼HTML？你在使用什麼CSS和/或Javascript？給我們看一看！ –

更新了代碼 – user1126068

好的...我做了一個[jsFiddle]（http://jsfiddle.net/MrLister/mPbNd/），但它看起來不像你的屏幕截圖，即使在糾正錯誤之後。那麼你可以用你的_actual_內容更新小提琴嗎？ –

的部分解決方案是由10個像素移動左格下來，通過給它一個上邊距大小作爲邊界半徑相同。

margin-top:10px;

Updated JSFiddle

但是，如果你這樣做，有一個與右div的圓角一個問題：它開始爲1個像素寬在上面，但縮小到0像素寬的左側，因爲左邊界寬度爲0.

解決方案：給右邊的div設置左邊界。然後將整個東西向左移動1個像素，以便邊框重疊（否則，邊框將並排）。

border-left:solid 1px black; 
position:relative; left:-1px;

Even more updated JSFiddle

來源

2013-08-21 09:36:22

完美！非常感謝！ – user1126068

CSS邊框和動畫

回答

相關問題