zoukankan html css js c++ java

css3学习笔记（一）

1. IE下的渐变： filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='0');

2.多背景：background:url(Images/c.png) no-repeat 0 0,url(Images/s-1.png) no-repeat 0 0;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .box
        {
            width:170px; height:170px; margin:0 auto; border:1px solid #000; background:url(Images/c.png) no-repeat 0 0,url(Images/s-1.png) no-repeat 0 0; -webkit-transition:1s all ease; /*后一个背景又叠加在前一个的下边*/
        }
            .box:hover
            {
                background-position:-170px -170px,0 0;
            }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

View Code

–background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

仿苹果开机效果：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        body
        {
            background:#000;
        }
        .box
        {
           width:738px; text-align:center; font-weight:bold; margin:0 auto; font-size:100px; font-family:'Microsoft YaHei'; color:rgba(255,255,255,0.2);
           background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0.1) 10%,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 30%); -webkit-background-clip:text; -webkit-transition:1s linear all;
        }
        .box:hover
        {
                background-position:500px 0;
        }
    </style>
</head>
<body>
    <div class="box">人气不过肥皂泡</div>
</body>
</html>

View Code

3.rgba：

l含义

•r Red 红 0-255

•g Green 绿 0-255

•b Blue 蓝 0-255

•a Alpha 透明 0-1

background:rgba(0,0,0,0.4);

4.背景图裁切 background-clip

•border：从border区域向外裁剪背景。

•padding：从padding区域向外裁剪背景。

•content：从content区域向外裁剪背景。

•no-clip：从border区域向外裁剪背景。

•text :文本

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .box
        {
            width:500px; height:200px; background:url(Images/a4.jpg); border:20px solid rgba(0,0,0,0.3); padding:20px;margin:0 auto; font-size:80px; font-family:"Microsoft YaHei";font-weight:bold; color:rgba(0,0,0,0.1); -webkit-background-clip:text; -webkit-transition:1s background-position linear;
        }
            .box:hover
            {
                background-position:0 1000px;
            }
    </style>
</head>
<body>
    <div class="box">
        我们都没错，只是不适合!
    </div>

</body>
</html>

View Code

5.背景图大小设置 background-size:20px 20px;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .box
        {
            width:800px;height:300px; margin:0 auto; background:url(Images/new_bg.png) no-repeat center; border:1px solid #000; background-size:20px 20px; -webkit-transition:1s all linear;
        }
        .box:hover
        {background-size:200px 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

View Code

例：背景全屏固定显示： body{margin:0;height:1000px;background:url(miaov.png) no-repeat fixed; background-size:100% 100%;}

6.背景图原点设置

lbackground-origin ： border | padding | content

•border-box：从border区域开始显示背景。

•padding-box：从padding区域开始显示背景。

•content-box：从content区域开始显示背景。

background-origin:content-box;

7.盒模型阴影 box-shadow:10px 10px 10px 4px rgba(0,0,0,0.8);

l用法

•box-shadow:[inset] x y blur [spread] color

•参数

–inset：投影方式

»inset：内投影

»不给：外投影

–x、y：阴影偏移

–blur：模糊半径

–spread：扩展阴影半径

»先扩展原有形状，再开始画阴影

–color

8.渐变 background:-webkit-linear-gradient(45deg,red 0%,yellow 50%,blue 100%); /*角度是逆时针的*/

background:-webkit-radial-gradient()/-webkit-linear-gradient()/-webkit-repeating-linear-gradient()/-webkit-repeating-radial-gradient() 反复径向渐变

例1：-webkit-linear-gradient()

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .box
        {
            width:200px; height:200px; border:1px solid #000; background:-webkit-linear-gradient(45deg,red 0%,yellow 50%,blue 100%);/*角度是逆时针的*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

View Code

例2：-webkit-repeating-linear-gradient()

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .box
        {
            width:200px; height:200px; border:1px solid #000; background:-webkit-repeating-linear-gradient(left,#f00,#fffc00,#01b439,#00eaff,#000390,#ff00c6),
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

View Code

9.渐变配合背景 background:-webkit-linear-gradient(left top,#fff 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 70%,rgba(255,255,255,1) 70%),url(Images/new_bg.png) no-repeat;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
      
        .box
        {
            width:440px; height:300px; background:-webkit-linear-gradient(left top,#fff 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 70%,rgba(255,255,255,1) 70%),url(Images/new_bg.png) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

View Code

10.渐变旋转 background:-webkit-linear-gradient(0deg,#ff6e02 0%,#fffc00 50%,#ff6e02 100%);

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        body{background:#5e3612;}
        #box
        {
            width:200px; height:200px;margin:30px auto; border:20px solid rgba(0,0,0,0.2); background:-webkit-linear-gradient(0deg,#ff6e02 0%,#fffc00 50%,#ff6e02 100%);
        }
    </style>
    <script>
        window.onload = function () {
            var oBox = document.getElementById("box");
            oBox.iDeg = 0;
            oBox.onmouseover = function () {
                move(oBox, 360);
            }
            oBox.onmouseout = function () {
                move(oBox, 0);
            }
        }
        function move(obj, iTarget) {
            if (obj.timer) {
                clearInterval(obj.timer);
            }
            if (iTarget > obj.iDeg) {
                var iSpeed = 5;
            }
            else {
                var iSpeed = -5;
            }
            obj.timer = setInterval(function () {
                if (obj.iDeg == iTarget) {
                    clearInterval(obj.timer);
                }
                else {

                    obj.iDeg += iSpeed;
                    obj.style.background = "-webkit-linear-gradient(" + obj.iDeg + "deg,#ff6e02 0%,#fffc00 50%,#ff6e02 100%)";
                }
            }, 14);
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

View Code

11.径向渐变 background:-webkit-radial-gradient(center,100px 200px,red 0%,blue 100%);

•参数

–起点：同线性渐变默认：中心

–形状： ellipse、circle 默认： circle

–大小：要给出起点，否则会和“起点”冲突

»50px 50px

12.文字阴影

•最简单用法

–text-shadow:2px 2px 4px black

•阴影叠加

–text-shadow:2px 2px 0px red, 2px 2px 4px green;

–先渲染后面的，再渲染前面的

•text-shadow：x y blur color, …

•参数

–x 横向偏移

–y 纵向偏移

–blur 模糊距离

–color 阴影颜色

•文本阴影如果加很多层，会很卡很卡很卡

例1：text-shadow:10px 10px 20px #000,1px 1px 10px red,5px 5px 15px yellow;

文字描边

l-webkit-text-stroke:宽度颜色

例2：text-shadow:6px 7px 0px #fdc9c9;-webkit-text-stroke:3px #fff;

查看全文

相关阅读:
Drawable、Bitmap、byte[]之间的转换
 关于java.lang.IllegalArgumentException: View not attached to window manager 错误的分析
 Android ListView使用BaseAdapter与ListView的优化
 Ubuntu, using svn from terminal
Ubuntu 12.04(64位)上搭建android 开发环境（ADT 、android-studio）
Widget改变大小
 android4.0中实现AppWidget集合
 android 中 AppWidget 的 ListView 的实现
 解决IllegalStateException: Can not perform this action after onSaveInstanceState
Drawable和Bitmap转换

原文地址：https://www.cnblogs.com/aimyfly/p/3156241.html