u010037043的专栏

第一次想用css绘制图形是在做一个列表时，想用三角形作为列表的图标，后来发现，css可以绘制各种图形，主要是利用border属性。一、三角形        根据不同的border设置可以绘制上三角，下三角，左三角，右三角等各种三角形，这里介绍下三角。       1.将元素大小设置为0 。#triangle-down{width: 0; height: 0;}

接上两篇：http://blog.youkuaiyun.com/u010037043/article/details/47035087http://blog.youkuaiyun.com/u010037043/article/details/47035077       图中两个王冠就是图标字体，这里主要是介绍怎样使用图标字体，怎样制作图标字体见文章末尾连接。一、为什么使用图标字体

接上篇：http://blog.youkuaiyun.com/u010037043/article/details/47035077一、box-shadowbox-shadow是给元素块添加周边阴影效果。box-shadow: inset X-offset Y-offset blur spread color ;box-shadow:[投影方式] X轴偏移量 Y轴偏移量

主要涉及三个点：渐变、阴影、data-icon。本着轻博客，每天轻松一个点的原则，将分三篇进行。^v^这一篇是渐变篇。本文以webkit核心浏览器为例，各个浏览器支持情况如下图：1.webkit核心浏览器下的的基本语法如下：-webkit-gradient(type, start_point, end_point, / stop...)-webkit-gradient(typ

主要两点：a.根据具体的链接给出图片提示；b.鼠标移至链接上出现具体的内容提示；                                          1.给链接添加图片      这里主要运用到css的属性选择器E[attr$="value"]，表示拥有属性attr，且属性值以value结尾的元素E。举个栗子：a[href$=".zip"]

首先上一张背景知识图。       background-clip用来确定背景的裁剪区域，可取以下值：      1.border-box:此值为默认值，背景从border区域向外裁剪，超出部分将被裁剪掉。为了看的更明显，我将padding和border设置为20px； padding: 20px; border: dashed 20px rgba(152,10,

老规矩，先上图（请忽略图中文字^V^）：       乍一看感觉是对中间的图片使用了float:center;但是仔细一想float属性是没有center这个值的。那是怎么实现的呢？我一步一步拆给大家看。1.构建主体结构       container中放置两个子元素，分别float:left和float:right;2.使用伪元素:before为中间的im

在我以前的认知里，在一些定位元素中（position为absolute、fixed或者relative），z-index越大就显示在越前面。比如下面的例子：       wrap1、wrap2、wrap3和box的position均为absolute，其中box为wrap1的子元素，z-index为10。.wrap{ position: absolute;}

三栏布局是很常见的布局样式，这里介绍两种三栏布局的方法。方法一：绝对定位法     1. 左右两栏采用绝对定位，分别固定于页面的左右两侧；     2.中间的主体栏用margin-left和margin-right为左右两栏留下空间；     demo戳这里：三栏布局之绝对定位法.left-side{width:300px;height:100%;positio

元素居中分为垂直居中、水平居中、水平和垂直都居中，这里主要介绍几种常见的使元素水平、垂直都居中的方法。方法一：负margin       1.将待居中元素box设置为绝对定位，left:50%，top:50%；       2.利用负margin值调整到居中，margin-left取负的box宽度的一半，margin-top取负的box高度的一半；       缺点：需要提前知道待

float定位很常用，我在这里总结了使用float定位过程中遇到的几个陷阱，供大家参考。陷阱一：父元素丢失高度       没有显式定义高度的父元素依靠子元素撑起高度，一旦子元素浮动定位，父元素将丢失高度。解决方法：将父元素的overflow设置为auto。陷阱二：与其他同级非浮动元素重叠       元素浮动定位后，它原来占据的空间会被其他元素补上，与它发生重叠。解决

像很多人一样，初学者我喜欢在css的最开头用*｛padding:0;｝，在做信用卡通知系统界面时我被这个坑了两次，在此mark。一、table的cellpadding设置无效       在写一个table时，发现cellpadding设置无效，查找原因后是因为*｛padding:0;｝导致的。       解决方法有两种：        1.使用td的paddin

负margin是一个很好用的属性，这里主要介绍几种我碰到的情景。一、自适应布局       这个在前面的三栏布局中已经介绍，负margin和float组合使用，详见http://km.oa.com/group/23033/articles/show/225239二、去除列表右边距        项目中经常会使用浮动列表展示信息，为了美观通常为每个li元素之间设置一定的间

在应用 CSS3 渐变/动画时，有个控制时间的属性 。它的取值中除了常用到的三次贝塞尔曲线以外，还有个steps() 函数。       steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。#demo { animation-it