JavaScript与css3

1.特定厂商的属性和前缀

在新的css3功能称为正式的css3规范之前,或者在一个规范的功能实现还没有最后确定之前,css3厂商前缀是一种支持

　　　　浏览器　　　　系统前缀

　　　　Android　　　　-webkit-

　　　　Chrome　　　　-webkit-

　　　　Firefox　　　　-moz-

　　　　Internet Explore　　-ms

　　　　iOS　　　　 -webkit-

　　　　Opera　　　　-o-

　　　　Safari　　　　-webkit-

2.css边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3边框</title>
    <style type="text/css">
    #div1{
        background-color: #8080ff;
        width: 400px;
        height: 250px;
        box-shadow: 10px 10px 10px #808080;
        -webkit-box-shadow:10px 10px 10px #808080;
    }
    </style>
</head>
<body>
    <!-- 
        阴影参数        动作
        h-shadow(必须)    水平阴影的位置
        v-shadow(必须)    垂直阴影的位置
        blur(可选)        模糊距离
        spread(可选)        阴影的大小
        color(可选)        阴影的颜色,默认黑色
     -->
     <div id="div1"></div>
</body>
</html>

3..border-radius属性实现圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius属性实现圆角</title>
    <style type="text/css">
    #div1{
        -webkit-border-radius:25px;
        background-color: #8080ff;
        width: 400px;
        height: 250px;
        border-radius: 25px;
    }
    </style>
</head>
<body>
     <div id="div1"></div>
</body>
</html>

可以使用单独的border-left-radius,border-top-radius,border-buttom-radius,border-right-radius属性来分别制定圆角

4.background-size属性设置图像大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-size属性</title>
    <style type="text/css">
    #div1{
        background-size: 400px;
        background-image: url(D:/照片大全/我女神/俏皮元气.jpg);
        width: 400px;
        height: 250px;
        border-radius: 25px;
    }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

background-size:可以用长度百分比 contain cover来设置背景图像的大小

日天....这本书特别简略,我已经发现自己在过渡学习