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>

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

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>

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>

例：背景全屏固定显示： 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>

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

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>

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>

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;

css3学习笔记（一）的更多相关文章

CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
HTML5+CSS3学习笔记（二）页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
CSS3学习笔记——伪类hover
最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示” ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...
css3学习笔记三
css3有些特殊的元素选择器这和jquery相似.效果图如下
我的CSS3学习笔记
1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...
HTML5+CSS3学习笔记（一）概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

随机推荐

电子商务ICP经营许可证申请条件
电子商务ICP经营许可证申请条件:注册资金100万的纯内资公司:服务器在本地:域名备案以公司名义备案:申请条件:1.公司营业执照副本复印件需清晰有效,并已完成该年度年检事宜,特别注意营业执照的有效期要 ...
OpenCV 4.1 编译和配置
OpenCV 4.0 版本,历时3年半,终于在2018年圣诞节前发布了,该版本增加的新功能如下: 1) 更新代码支持 c++11 特性,需要兼容 c++11 语法的编译器 2)增加 dnn 中的模块功 ...
P2P终结者和反P2P终结者如何使用
1 安装软件并运行,首先扫描网络,第一台控制机就是自己,你可以查看IP,和命令提示符下的IP吻合. 2 点击高级选项,指定本机网络环境和网卡 3 控制规则设置,首先设置全局限速模板,其他的差不多. 4 ...
修改Jenkins的BUILD_NUMBER
因为特殊原因需要修改jenkins的BUILD_NUMBER环境变量,现在将修改方法记录一下, Jenkins ->系统管理->脚本命令行输入以下脚本,运行就Ok Jenkins.ins ...
Oracle 导入导出SQL 查看登录用户表个数
导出 : --注意结尾不能加分号; 导入 IMP HLMARKET/HLMARKET@192.168.1.22:1521/orcl file=e:/db/HLMARKET_20150729.dmp f ...
比较R语言、perl语言，matlab中for循环和while循环的使用
http://zhan.renren.com/zxccshkbx?gid=3602888498030523562&from=post&checked=true
用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染
今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...
web开发中常见的安全漏洞及避免方法
1.安全攻击 1.SQL.HTML.JS.OS命令注入 2.XSS跨站脚本攻击,利用站内信任的用户,在web页面插入恶意script代码 3.CSRF跨站请求伪造,通过伪装来自信任用户的请求来利用受信 ...
PHPCMS V9使用中的一些心得体会
官方演示站:http://v9.demo.phpcms.cn/ 在线帮助文档:http://v9.help.phpcms.cn/ 案例展示:互联网 http://www.i-busi.com 1. ...
Laravel自定义分页样式
<?php namespace App\Http\Controllers; use DB; use App\Http\Controllers\Controller; class UserCont ...

css3学习笔记（一）

css3学习笔记（一）的更多相关文章

随机推荐

热门专题