1、opacity：opacity的值会被它的所有子元素继承，也就是说不可能让一个元素比他的父元素更加不透明，但你可以让他变得更透明点Firefox Webkit Opera支持，注意IE 2、使用Alpha通道可以像其他任何颜色值一样被子元素继承，但元素的整体不透明度并不受影响，rgba值只能应用到它的指定元素上，所以子元素可以否决所有的继承Firefox Webkit Opera支持，注意IE 3、颜色变量1p {color:black;} 2p:last-child{ 3 backgorund-color:...
1 实现3D立方体首先准备好UL以及6个Li；代码如下ul { position: absolute; top: 50%; left: 50%;transform:translate(-50%,-50%) // 以上代码主要是使ul居中而已 transform-style: preserve-3d; // 使子元素保留其3D视角-webkit-perspective: 0; //视距离，默认值为0 } li { width: 200px; height: 200px; position: absolute; ...
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="description" content="描述"> <meta name="keywords" content="关键字"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>纯css3加载动画</title> <style> .spinner { width: 100px; height: 100px; bo...
CSS3 边框一、CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性：border-radiusbox-shadowborder-image二、CSS3 圆角在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在 CSS3 中，很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角：这是圆角边框！ /*在div中添加圆角元素*/ div { border:2px solid; border-radi...
前言最近开发中遇到的动画特效非常的频繁，加上之前开发是用到animation.js这个动画库，对动画的属性一知半解，so 今天来了解一下做个记录。CSS3动画基础属性其实也就是一张图就能概括了@keyframes的语法属性 /*animationname : 定义一个动画名称keyframes-selector：动画区间百分比 合法值：0-100%from (和0%相同)to (和100%相同)注意： 您可以用一个动画keyframes-selectors。css-styles：一个或多个合法的CSS样式属性*/@keyfra...
.ui-button {BORDER-LEFT-WIDTH: 0px; OVERFLOW: visible; CURSOR: pointer; FONT-SIZE: 16px; HEIGHT: 40px; BORDER-RIGHT-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-BOTTOM-WIDTH: 0px; ZOOM: 1; FONT-WEIGHT: 700; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; PADDING-LEFT: 20px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘...
第11章 CSS3布局基础【学习重点】了解CSS2盒模型。设计边框样式。设计边界样式。设计补白样式。了解CSS3盒模型。11.1 CSS盒模型基础页面中所有元素基本显示形态为方形的盒子（Box），根据盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示方式。11.1.1 盒模型结构Box具有如下特点：每个盒子都有：边界、边框、填充、内容4个属性。每个属性都包括4个部分：上、右、下、左。属性的四部分...
gradient主要用于渐变，来实现一些特效，现在网上已经有了很多较好的文章，以我现在菜鸟的级别估计很难写的比他好，所以在这里直接上链接来自w3cplus：http://www.w3cplus.com/content/css3-gradient在这里我主要来讲一下可以用它来做什么好玩的东西（一下均在谷歌浏览器中运行）案例一：滚动条（先上图）瞧上面那个图就是用线性渐变（当然还有一个镜像渐变）做成的，那是怎么做成的呢，直接上代码（其实很简单）。<!--HTML部分-->...
HTML5 & CSS3 准备就绪 该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。HTML5安全手册CSS3按钮生成器 所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。When can I use…（HTML5 & CSS3 浏览器兼容性） 很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。CSS3颜色值/名称速...
background: -webkit-linear-gradient(90deg, #556270 10%, #FF6B6B 90%);background: -moz-linear-gradient(90deg, #556270 10%, #FF6B6B 90%);background: -ms-linear-gradient(90deg, #556270 10%, #FF6B6B 90%);background: -o-linear-gradient(90deg, #556270 10%, #FF6B6B 90%);background: linear-gradient(90deg, #556270 10%, #FF6B6B 90%); 动画库使用微场景页面/* animation sets *//* 移动 from / to */.pt-page-move...
我们经常使用一些excel表格来处理数据，在html中，我们可以用table来制成表格。今天来看一下一些不同的方法。方法一：使用CSS3的background的linear-gradient属性linear-gradient表示一种线性渐变，指定好开始的坐标，以及线性渐变的参数，就可以实现背景颜色的多变。先来看效果图：看html代码：<div class="grid"></div>CSS代码： div,canvas{width: 400px;height: 280px;margin: 10px;border: 1px solid #000000;}.grid{b...
css3按钮<!doctype html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"><script src="com/js/jquery.js" type="text/javascript"></s...
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)来源：互联网 作者：佚名 时间：03-28 14:17:14 【大中小】border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核； -moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候...
学习来源:慕课网http://www.imooc.com/view/240先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 1<body> 2<div class="wrap effect"> 3<!-- effect类:是阴影类,其他元素也可以使用 --> 4<h1>Shadow Effect</h1> 5</div> 6<ul class="box"> 7<li><img src="images/photo1.jpg" alt=""></li> 8<li><img src="images/photo2.jpg" alt=""></li> 9<li><img src="images/photo3.jpg" alt=""></li>10</ul>11</body>CSS样...
那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作...