CSS3中有关于Border的属性一共有三个：圆角border-radius，图片边框border-image,边框多颜色border-color，其中圆角border-radius是常用的一个属性，而且现在很多网站制作圆角效果都使用border-radius来实现。 /*我们可以分别给各边上色*/border-top-color: <color>/*给上边框上色*/border-right-color: <color> /*给右边框上色*/border-bottom-color:<color> /*给下边框上色*/border-left-color: <color> /*给左框上色*/上面展示的...
这篇文章主要介绍了详解CSS3中强大的filter(滤镜)属性的相关资料,需要的朋友可以参考下博主最近在做网站的过程中发现了一个非常强大的CSS3属性，就是filter(滤镜)属性，喜欢p图的朋友看名字都应该知道这是什么神器了吧。当然，这个属性的效果肯定不能跟ps相比，但是利用的好的话可以在节约很多空间下，把一张图做成两张图的效果。1、定义 filter，从字面意思来看就是滤镜，官方定义filter属性定义了元素(通常是<img>)的可视效果...
在看css3相关文章时候，看到一个用css样式实现一个“+”加号效果这里面接触到一个新的css3属性，outline，翻译成中文就是——"轮廓";语法：outline:outlineWidth outlineStyle outlineColor;例如：outline:5px solid blue;而且据我测试，这里的5px，solid，blue可以随意调换位置，不影响显示效果； 而且这个属性不属于盒模型的一部分，所以不占据空间，在使用的时候，不需要去计算宽度，高度等值浏览器的支持情况也较好：ie8+，还有...
Border-color是专为边框的多颜色而准备的属性，接下来为大家介绍一下CSS3之边框多颜色Border-color的使用，喜欢的朋友不要错过 CSS3之边框多颜色Border-color是专为边框的多颜色而准备的属性。在CSS2中也有边框颜色这个属性，但是边框颜色属性在CSS3中又有什么惊人之举呢?下面就为大家介绍一下CSS3之边框多颜色Border-color吧。 一、Border-color的语法 代码如下:元素选择器 { -moz-border-top-colors: color color color; /*顶边边...
一、position元素介绍position属性规定了元素的定位类型，通过定位，可准确地定义元素相对于其正常位置而应该出现的位置，或者是相对于父元素、另一元素和浏览器窗口等的位置。position属性包含有5个属性值，分别为static、relative、absolute、fixed以及inherit。具体属性值描述如下表格所示：属性值描述所属类别static默认值，元素遵循默认的文档流。 relative元素遵循默认的文档流。相对于元素的原位置进行移动，周围元素忽略该...
近年来 HTML5 和 CSS3 发展迅速，国内外不乏一些大站，酷站都在使用最新的技术，各家厂商的浏览器对它们的兼容性越来越好。CSS3中有一个强大的属性 Transform。有了这个特性，各种特效轻松搞定。引用一句歌词“旋转，跳跃，我不停歇”。从字面上就能看出，Transform 是 变型 的意思，他的值主要包括 旋转rotate，扭曲skew，缩放scale，移动translate以及矩阵变形matrix 。下面的内容就来聊聊CSS3中的这个重要的属性。首先可以学习G...
一、timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function，只是注意到自定义贝塞尔曲线。 1)一个项目中的实例 先来看看左边加了steps和右边没加的区别。左边的是一锤一锤的，右边会出现影子。 【注意下面这个demo在firefox中不能执行，只能在chrome中执行，因为我动画的是“background-image”属性】 代码如下，我只把关键的几个代码贴出来了，详细的可以查看这里：.btn-pay {backgr...
最近在项目中用到了CSS3中的动画属性。常常容易搞混。所以从网上查了点资料，总结一下，方便有需要的朋友们可以参考学习。Transform在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并...
这篇文章主要介绍了CSS3中的content属性使用示例,是为CSS3入门学习中的基础知识,需要的朋友可以参考下CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content:"插入的文章"，或者content:none不插入内容html:XML/HTML Code复制内容到剪贴板<h1>这是h1</h1><h2>这是h2</h2>cssCSS Code复制内容到剪贴板h1::after{ conte...
transform的作用transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool)transform的兼容性transform的兼容性还是比较乐观的。IE9以下不兼容，IE9支持代替的-ms-transform属性不过只支持2D转换。谷歌和Safari支持代替的-webkit-transform属性。IE9以上、火狐和欧朋是兼容的。想必大家在实际项目中肯定会遇见p不定宽和高垂直水平居中的问题。记得以前都是用js去实现。其实用css来实现...
CSS3的形状变换允许我们对元素拉伸、缩放等等 这篇我主要谈下一2D平面变换 属性transform可以进行变换 transform就是变形的意思 并且它主要通过函数来使用，有以下函数translate() 平移变换ratate() 旋转变换scale() 缩放变换skew() 倾斜变换matrix() 矩阵变换transform-origin则时定义变换的中心平移变换translatetranslate()两个参数，第一个是x轴相对位移，第二个参数是y轴相对位移.demo { ......transform: translate(100px...
CSS3中增加了可以实现多列布局的属性 在此之前的实现很麻烦可能需要各种定位 现在我们只需要一个属性就可以实现 多列布局类似于我们的报纸布局 这样可以方便读者观看多列数量与多列宽度如果一行文字太长的话，我们可能会没有读下去的欲望像这样<p class="demo">......</p>.demo { width: 600px; height: 200px; border: 1px solid black;}多列数量column-count可以指定你想要的列数 浏览器会自己设置合适的列宽度.demo { ...
这两天写的都是小知识点 因为确实有点忙 虽然很简单，但是本着全面总结的原则，还是要说一下 今天我来说一下这个CSS中的盒模型 以及CSS3中可以改变盒模型的属性盒模型盒模型是计算元素尺寸的模型规则 在我们CSS中盒模型分为两种W3C标准盒模型正常情况下我们用的都是这个标准的盒模型 标准盒模型中元素尺寸使用如下计算方式 元素实际宽度 = width + padding（左右内边距大小） + border（左右边框大小） 元素实际高度 = height + p...
上周简单写了一下2D变换 今天来写写3D变换 三维立体效果我觉得是CSS3中最有意思的地方 不得不佩服那些开发者大神们 让我们能够通过几行CSS代码就能得到酷炫的视觉体验浏览器坐标系在讲正式语法之前，首先需要了解浏览器坐标系 这需要我们把浏览器界面想象成一个立体的场景这是网上流传很广的浏览器坐标系图片 从左到右的方向是浏览器x轴的正方向 从上到下的方向是浏览器y轴的正方向 而z轴正方向是面对于我们的 了解这个很重要，因为...
这里给大家推荐4个CSS3的新属性，非常的实用，附上示例，有需要的朋友可以好好研究下。做项目经常会用到css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开始慢慢的去了解并使用css3（还有html5），因为我觉得这是一种趋势，它是一种已经被制定的标准。我并不是专门在做前端的，只是有时不得不自己去写这些东西，有时喜欢研究研究这些，所有以上只是我的个人看法。1、在之前我想在页面做出...