css3 rotate(1turn)的用法

css3中user-select的用法详解

css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项的说明,更多信息可参考如下css3文档说明. 参考链接:http://www.css88.com/book/css/properties/user-interface/user-select.htm (1) 语法 user-select:none | text | all | element 默认值…

前端CSS3布局display:grid用法

前端CSS3布局display:flex用法 1. 先附上代码点击查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display:flex</title> <style> .grid-box { width: 100%; background-color: lightseagreen; } .grid-box>di…

前端CSS3布局display:flex用法

前端CSS3布局display:flex用法先附上代码点击查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display:flex</title> <style> .flex-box { background-color: aquamarine; } .flex-box>div { background-colo…

CSS3 RGBA 属性高级用法

这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解释如下: 1 2 3 4 5 /* 基本语法 */em { color: Rgba(red,green,blue,opacity) }/* 举例 */em { color: rgba(255,0,0,1) } /* 红色,不透明 */em { color: rgba(100%,0%,0%,1) } …

CSS3转换(transform)基本用法介绍

一个炫酷的网页离不开css的transform.transition.animation三个属性,之前一直没有涉及到这块内容,刚好最近要做一个相关东西,趁此机会好好学一学这三个属性. 一.功能实现元素的平移.旋转.缩放或倾斜. 二. 实现条件只能转换由盒模型定位的元素. 三. 基本语法 transform: none 不应用任何变换 transform: <transform-function> 应用一个或多个<transform-function>值,以空格分开 <tr…

css3中transform的用法

transform:rotate旋转deg #box1{ -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); }transform:skew倾斜 #box2{ -moz-transform:skew(20deg); -webkit-transform:skew(20deg); }transform:scale()放大 #box3{ -moz-transform:scale(2.0); -webkit-transform:s…

css3中webkit-box的用法（平分父元素）

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-). 注意:其子容器必须是block;块元素才能运用此样式,否则无效: 一.box-flex属性…

css3 box-shadow 阴影的用法

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方…

简单介绍移动端CSS3单位rem的用法

PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表请看caniuse. rem是什么意思呢?CSS手册上的说明:相对长度单位,相对于根元素(即html元素)font-size计算值的倍数. rem用法很简单,就是根标签html设置文字大小后(不设置的话,大部份浏览器默认为16px),其他标签设置rem都是html大小的倍数. html{ font-…

CSS3——:nth-child选择器基本用法简述

注:n 是从1开始的 :nth-child 是 CSS3 提供的一个好用的选择器,因为在项目中经常用到,所以简单总结了它的常用方法下面示例代码截图用的是同一个例子,p元素的父元素都是body p:nth-child(2) 表示给第2个p元素添加背景色,p:nth-child(3)是第3个p元素,以此类推 p:nth-child(2) 承接上面的示例,如果这里的p元素前面还有其它元素,结果如下图,段落1被添加背景色,而不是上面示例的段落2被添加背景色, 因为这里的p:n…

css3的counter的用法

很早之前,计数器仅存在于ul,ol等元素中,如何想给其他元素增加计数,就只能通过list-style-image,或者background-image来实现.不过现在css3增加了counter属性,可以实现任何元素的计数作用.不过这个counter属性还需要配合其他css属性一起才能有效果. 首先, counter-reset 主要功能是用来标识计数器的作用域的.它只能作用于选择器上,它的值包括两部分:第一部分为计数器的名字:第二部分为计数器的起始值(默认为0),counter-reset还可…

CSS3常用属性及用法

1.transition: 过渡属性,可以替代flash和javascript的效果兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome 25 以及更早的版本,需要前缀 -webkit-. Safari 需要前缀 -webkit-. div { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari a…

css3 小三角的用法

<div class="arrow-up">  </div> <div class="arrow-down">  </div> <div class="arrow-left">  </div> <div class="arrow-right"&…

css3中webkit-box的用法

转自:http://www.frontopen.com/288.html 1.之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局.至少width要自己去算百分比.2.flexible box 就可以实现真正意义上的流体布局.只要给出相应属性,浏览器会帮我们做额外的计算. 提供的关于盒模型的几个属性: box-orient 子元素排列 vertical or horizontalbox-flex …

CSS3中box-shadow的用法介绍

一般我们通过box-shadow来设置盒阴影,但是有些属性我们一般没有用到,这篇文章将对box-shadow属性进行逐个分析.语法 CSS Code复制内容到剪贴板 E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 即: 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色} inset 投影方式此参数是一个可选值,如果不设值,其默认的投影方式…

css3——border-image属性的用法

项目需求是实现鼠标移到按钮上时,下方显示一张渐变的三角图片,于是想到使用border-image来实现. 实现;//向外偏移10px,可使边框内部的内容不是那么紧凑border-image-repeat: round;//该属性平铺,不拉伸也不重叠 border-image实现渐变色的边框: border-image-source: linear-gradient(red, blue); border-image-slice: 20; pasting 于是又采用另外一种方式来引用border-i…

css3属性box-sizing:border-box 用法解析

响应式Web设计经常需要我们通过百分比设置组件宽度.如果我们不考虑边框,那么很容易就可以实现,但如果你给每一列以及总宽度都采用百分比设置,那这个时候固定的边框大小就会出来捣乱.下面我们将看到一组方法去解决这个问题,你会学到如何创建一个流式布局,而不用担心额外的边框以及内边距. 假设我们需要一个五列的布局.我们要考虑的第一件事就是外边距(margins).假设所有的列都需要4%的外边距,我们需要为所有的外边距保留20%(4%*5(5列)=20%)的占宽比:然后我们从总宽比(100%)里面减去20%…

CSS3的@keyframes用法详解:

CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题.使用transition属性也能够实现过渡动画效果,但是略显粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以利用…

CSS3用法理解

这里只概括了我对CSS3各属性的用法理解.具体每个属性的值,以及例子,看这里 (竟然每篇文章不能低于200字,不能低于200字不能低于200字不能低于200字不能低于200字....请无视)…

CSS3中惊艳的gradient

以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradient那点事儿> 但在实际应用中却不怎么用,主要就是因为自己并没有懂这两个属性的强大之处,再加上自己的想象力实在太差,想不到在什么场景使用它们. 我本来以为它们仅仅是做渐变效果,显然我的想法太狭隘了,它们还有更多的用处. 最近在看<CSS Secrets>,里面就提到了很多CSS使用技巧,下面…

使用css3的动画模拟太阳系行星公转

本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一些比较特别的动画. 太阳系最终的效果图如下: css3的animation是通过关键帧的形式做出来的,首先设定一个动画的运行时间,然后在这个时间轴上的若干位置处插入关键帧,浏览器根据关键帧设定的内容做过渡动画.animation常结合transform属性进行制作.以一个简单的例子说明,以一个div…

CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.-ms-.-o-),本文为简化内容,直接使用了原版属性根据不同属性的支持度,在实际使用的时候需要添加相应的浏览器前缀支持目录: 变形transform 过渡transition 动画animation 一.变形transform 变形有rotate旋转.scale缩放.translate位移.sk…

css3绘制几何图形

用css3绘制你需要的几何图形 1.圆形示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class="size example1"></div> css: .size{ width:200px; height: 200px; background: #8BC34A; } .example1{ border-radius:100px; } 2.自适应椭圆思路:border-…

bootstrap快速入门笔记（四）-less用法指南， mixin和变量

一,less变量,less文件 1.bootstrap.less 这是主要的 Less 文件.该文件中导入了一些其他的 less 文件.该文件中没有任何代码. 2.forms.less 这个 Less 文件包含了表单布局.输入框类型的样式. 3.mixins.less 4.这个 Less 文件让 CSS 代码可重复使用. 5.patterns.less 这个 Less 文件包含了重复的用户界面元素的 CSS 代码,不会被位于 scaffolding Less 文件中的基本样式覆盖. 6.rese…