1.链接状态：大部分浏览器支持4中基本的链接状态：未访问的链接、已访问的链接、访问者的鼠标正悬停在上方的链接、正被单击的链接。这些状态的4个对应伪类选择器分别是：link、：visited、：hover、：active。为了实现最大程度的设计控制，必须对所有不同的访问状态都定义样式，但是必须按照指定顺序：a : link{color : #F60; }a : visited{color : #900; }a : hover{color : #F33; }a : active{color : #B2F511; }如果改变上述顺序...
工作之余写的一个类似于QQzone的菜单效果先上截图：图一为点击按钮前界面：图二为点击按钮后的界面下面上代码：<!--css部分--> <style type="text/css"> @font-face {font-family:‘Raphaelicons‘;src:url(font/raphaelicons-webfont.svg) format(‘svg‘),url(font/raphaelicons-webfont.woff) format(‘woff‘);font-weight:normal; } * {margin:0;padding:0;border:0;list-style:none;}html, body, #container{width:100%;heig...
CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有：grayscale 灰度 值为0-1之间的小数 sepia 褐色 值为0-1之间的小数saturate 饱和度 值为numhue-rotate 色相旋转 值为angl...
自己在写css时总会遇上css样式继承的问题，好在一般问题不大，但一直也不明白css样式继承的规则，最近发现了一篇文章讲的不错，因此转载过来：所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则，应用的时候容易让人迷惑CSS的一个主要特征就是...
如果你经常活跃在一些社交网站上，那么你肯定会看到过很多形式各异的分享按钮，目前由于HTML5和CSS3的普及，很多分享按钮也都应用了CSS3样式，甚至会有很多带有动画的CSS3分享按钮。本文就向大家介绍了9款经典华丽的CSS3分享按钮，以及它们的源代码，希望能给各位开发者带来一定的帮助。1.jQuery/CSS3实现超酷的分享按钮今天要分享的这款分享按钮是基于CSS和jQuery的，按钮比较大，非常大气。在线演示源码下载2.jQuery交互式分享按...
HTML代码HTML代码结构很简单，跟之前那篇文章使用的相同：复制代码代码如下:<div id="raysDemoHolder"> <a href="/" id="raysLogo">WebHek</a> <div id="rays"></div></div>最外面的div作为父元素，它的position是relative，有固定的高和宽度，有两个子元素：一个用来放logo，一个用来做光芒效果的容器。 CSS代码我们这里要用纯CSS来实现，需要使用CSS3的动画技术，这里用到的CSS语法是@keyframes。我们的基本实现原理是用keyframe...
border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。把这些基本的图形进行组合，还可以描绘成不同的图案，真的很棒。以下只是简单的几个举例，更多的...
现在的WEB已经不是以前的WEB了，传输更大的数据量，有着更加复杂的计算，这就需要利用进度条来提高用户体验，必要时可以让用户耐心等待，不至于因操作卡了而关掉你的网页。前几天我在网上看到一款和一般进度条不太一样的玩意，它的外观是一条直线，末端有个小球，在进度变化时可以显示数字百分比，更可以用不同颜色来表示当前进度的状态。来看看效果图。一看进度条外观，还不错吧。同时，我们也可以在这里看到进度条的DEMO演示接下...
box-sizing：content-box|border-box|inherit;默认值：content-box适用于：所有接受width和height的元素继承性：无 padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有bord...
IOS 2.-webkit-touch-callout (ios 2.0+) none:禁止弹出系统弹窗 default:默认Android Common1.-webkit-user-select none：文本不能被选择 text：可以选择文本 all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。 element：可以选择文本，但选择范围受元素边界的约束2.-webkit-perspective number:元素距离视图的距离，...
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。CSS3 动画CSS3 @keyframes 规则如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。浏览器支持属性浏览器支持@keyframes animation Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animat...
边框圆角边框盒阴影边界图片 圆角CSS3 圆角制作器 指定每个角 背景 多重背景图像大小图像的定位背景剪裁 渐变线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义指定角度的线性渐变多个颜色节点的线性渐变线性渐变------透明度重复的线性渐变重复渐变渐变的大小closest-sidefarthest-sideclosest-cornerfarthest-corner 文本效果文本阴影 盒子阴影 阴影颜色...
css水平垂直居中第一种方法：在父div里加： display: table-cell;vertical-align: middle;text-align: center; 内部div设置 display: inline-block;例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>css水平垂直居中</title><style>body {margin: 0;}.center {wid...
CSS3之边框多颜色Border-color是专为边框的多颜色而准备的属性。在CSS2中也有边框颜色这个属性，但是边框颜色属性在CSS3中又有什么惊人之举呢?下面就为大家介绍一下CSS3之边框多颜色Border-color吧。 一、Border-color的语法 复制代码代码如下:元素选择器 { -moz-border-top-colors: color color color; /*顶边边框*/ -moz-border-right-colors:color color color; /*右边边框*/ -moz-border-bottom-colors: color color color; /*...
1.@keyframes定义和用法 通过 @keyframes 规则，您能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 注释：请使用动画属性来控制动画的外观，同时将动画...