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>
<!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：
background:rgba(0,0,0,0.4);
4.背景图裁切 background-clip
<!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.背景图原点设置
background-origin:content-box;
7.盒模型阴影 box-shadow:10px 10px 10px 4px rgba(0,0,0,0.8);
<!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>
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的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
随机推荐
- TestNG系列之三：TestNG忽略测试
有时,我们的代码是没有准备好,如果测试用例写入到测试方法/代码将无法运行,在这种情况下, @Test(enabled = false)有助于禁用此测试案例.
- Java实现MySQL图片存取操作
转载自:http://blog.csdn.net/thc1987/article/details/3972201 存入操作 /* ---------------表结构------------ 表名:s ...
- 使用two.js生成的卫星环绕动画效果
来源:GBin1.com two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现: webgl svg 2d画布 使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:T ...
- 学 Vim 时希望早点知道的建议
来自wechat 从 2009 年开始,我就一直把 Vim 当做我的主要(唯一)文本编辑器.在过去的这些年,我学到了很多好用的 Vim 技巧,它们令我感觉相见恨晚,因为它们极大地提高了我的文本编辑效率 ...
- SQLiteDatabase 源码
/** * Copyright (C) 2006 The Android Open Source Project * * Licensed under the Apache License, Vers ...
- nutch中bin/crawl和bin/nutch crawl的用法(转)
针对上一篇文章中出现的问题:Command crawl is deprecated, please use bin/crawl instead错误信息,今天在官网上查阅了一下,进行了总结. 官网lin ...
- Linux命令-网络命令:mail
root用户发送邮件 mail wangyunpeng 给wangyunpeng发送邮件,wangyunpeng不在线也可以收到发送的邮件 wangyunpeng用户接收邮件 mail 接收邮件 he ...
- VMware配置网络的3种方式：NAT、Host-Only、Bridged
网络常识: 1.网络中对电脑的访问是通过ip定位的 就好像我们的身份证号,可以唯一辨识一个人.ip是用来区分网络中的电脑的,因此同一网络(准确讲是“网段”)中,ip地址不能相同.如果同一网络中有相同的 ...
- POI操作Excel导入和导出
Apache的POI组件是Java操作Microsoft Office办公套件的强大API,当中对Word,Excel和PowperPoint都有支持,当然使用较多的还是Excel.由于Word和Po ...
- Powerdesign使用小技巧（转载）
1.做CDM模型的时候,因为开始定义ITEM的时候,没有注意把NAME和CODE全定义成一样的.结果后面想改的时候比较麻烦,一修改NAME结果CODE也变了.后来找到两个方法可以解决这个问题.A.Po ...