CSSを学ぶ(3)
一、異なるブラウザの違い
すべてのブラウザがCSS 3を完全にサポートしているわけではないので、各ブラウザは異なる方法で同じ効果を実現し、異なる接頭辞表示を有している(HTML 5はクロスブラウザをサポートしているが、各ブラウザの互換性は異なる).
二、CSS 3ボーダー属性
1.border-radius:枠線のフィレットプロパティ;
2.box-shadow:枠線シャドウプロパティ;
3.border-image:画像に枠線属性を追加する
値
説明
border-image-source
枠線に使用する画像のパス.
border-image-slice
画像の枠線が内側にシフトします.
border-image-width
画像の枠線の幅.
border-image-outset
枠線画像領域が枠線の量を超えています.
border-image-repeat
画像の枠線が平らに敷くか、敷くか、伸ばすか.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>CSS</title>
<style>
.one{
<p> width:200px;</p><p> height:200px;</p><p> border:1px solid red;</p><p> border-radius:0px;</p> }
</style>
<script>
window.onload=function () {
var div=document.getElementsByTagName("div")[0];
var timer;
div.onmouseover=function () {
clearInterval(timer);
timer=setInterval(function () {
if(parseInt(div.style.borderRadius)>=div.offsetWidth/2){
clearInterval(timer)
}else{
var radius=(div.offsetWidth/2-parseInt(div.style.borderRadius))*0.2;
div.style.borderRadius=parseInt(div.style.borderRadius)+radius+"px";
}
},60)
}
div.onmouseout=function () {
clearInterval(timer);
timer=setInterval(function () {
if(parseInt(div.style.borderRadius)<=0){
clearInterval(timer)
}else{
var radius=(0-parseInt(div.style.borderRadius))*0.2;
div.style.borderRadius=parseInt(div.style.borderRadius)+radius+"px";
}
},60)
}
}
</script>
</head>
<body>
<div class="one" style="border-radius:0;">
</div>
</body>
</html>