学习CSS（3）

来源：互联网发布：uplay修改host软件编辑：程序博客网时间：2024/04/29 07:42

一、不同浏览器的差异

由于并不是所有的浏览器都完全支持CSS3的，所以各浏览器对于不同方式实现相同的效果，具有不同的前缀表示（HTML5支持跨浏览器，但是各浏览器兼容程度不同）。

二、CSS3边框属性

1.border-radius：边框圆角属性；

2.box-shadow：边框阴影属性；

3.border-image：利用图片添加边框属性

值

描述

border-image-source

用在边框的图片的路径。

border-image-slice

图片边框向内偏移。

border-image-width

图片边框的宽度。

border-image-outset

边框图像区域超出边框的量。

border-image-repeat

图像边框是否应平铺(repeat)、铺满(round)或拉伸

(stretch)。

<!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>

0 0