.BtnOkay /* 黄 */ { font-weight: bold; font-family: "Microsoft JhengHei"; color: #FFFFFF; border: 0px; background-color: #FBBB13; background-repeat: no-repeat; background-position: 98% 48%; cursor: pointer; } .BtnLogin /* Steam绿 */ { font-weight: bold; font-family: "Microsoft JhengHei"; color: #FFFFFF; border: 0px; ...
最近在工作中总是要求IE8兼容CSS3属性，在网上搜了搜主要是引入了一个htc文件（ie-css3.htc或者PIE.htc。个人认为这两个文件的作用差不多，具体差异值得探讨） 下载地址：https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3 支持的主要CSS3属性： 1.border-radius圆角 CSS代码如下： .pie_radius{ width:250px;height:250px; background-color:#34...
Transition（过渡），设置过渡时间，（transition-duration） 无标题文档 .box{width:100px;height:100px;background:red; transition:500ms;} .box:hover{ background:blue;width:200px;height:200px;} 只设置某一个样式过渡，即要运动的样式，下面的例子设置了width过渡（all | width | height | ... | none): 无标题文档 .box{...
例子： 何问起效果 查看效果：http://hovertree.com/hvtart/bjae/q3etb2qv.htm 设置 div 元素的不透明级别：div{opacity:0.5;}opacity 属性设置元素的不透明级别。默认值： 1继承性： no版本： CSS3JavaScript 语法： object.style.opacity=0.5value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 inherit 应该从父元素继承 opacity 属性的值。 博客园 roucheng js,jquery,css,ht...
CSS3之边框属性border 1、设计源码 边框属性border #border_style{ border-width:thin; border-style:dashed; border-color:#0C9; } #border{ padding-top:200px; border:dashed thin #0C9; } Border Border 2、设计结果 3、源码说明 （1）border设置样式等价于border-width、border-style和border-color三者设置效果 （2）border-width：设置边框的宽度 （3）border-style：设置边框的...
css3出来已经很久了，现在来谈判断浏览器是否支持某个css3的属性虽说有点过时了，但是还是可以谈谈的，然后，此篇主要谈的不是判断是否支持，而是怎么封装更好，为什么这么封装，欢迎吐槽。 入题，判断浏览器是否支持css3 transition，方法很简单，只需要下面这句代码就行了： transition in document.body.style chrome和ie支持document.body，但是Firefox不支持，Firefox支持document.documentElement，对于没有doctype...
CSS3新增了一个令人心动的属性：animation，尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽，但是从代码量和浏览器性能上有着明显的优点。 animation基本用法是： animation: name keeping-time animate-function delay times iteration final; 第一个参数：name (animation-name)： 动画的名字，即设定动画过程的名字，CSS3采用“关键帧 keyframes”来定义动画，方式形如： ...
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。 一.旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。 二.缩放 scale 用法：transform: scale(0.5) 或者 transform: scale(0.5, 2); 参数表示缩放倍数； 一个参数时：表示水平和垂...
前言 本来之前的东西都是直接放在U盘的，但是怎奈，昨晚下班U盘拿回家的时候发现USB接口那里的卡槽里面那个磁条居然掉了。。so之前10月份做的东西都不见了。。这篇文章也是其中的受害者之一。所以以后还是不图方便了，东西全部放电脑上比较稳妥。 css3边框属性最后一课：box-shadow边框阴影效果。从英文字面上的意思的理解其实，这个属性并不是边框阴影，而是css模型边框阴影。但是copy to China总要符合我们的阅读习惯，cs...
现在专注于移动端开发项目，对于动画这个点是非常重要的，每当我遇到一个新的知识点，我就会和大家一起分享 animation-fill-mode :把物体动画地从一个地方移动到另一个地方，并让它停留在那里 定义和用法 animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影...
CSS文本属性复习 1、white-space：对象内空格的处理方式 2、direction：文本流的方向 3、unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用 1.white-space：对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用，使得超出部分显示为省略号，主要ov...
CSS颜色属性复习 color name 颜色英文名称命名（如red,blue,pink,white等） HEX方式 十六进制方式（#FF0000，#B9B9B9等） rgb方式 三原色配色方式（rgb(255,0,00)） 这几种方式都是常用到的颜色属性，本人使用较多的是HEX方式。CSS3中新增了几种颜色属性。 CSS3新增颜色属性 1、RGBA模式 2、HSL模式 3、HSLA模式 1、RGBA模式 rgba在之前一遍博客中已经提及过，a表示的是透明度，取值范围为0~1,rgb分别是红绿蓝三色，...
弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。 其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下： flex-flow: <flex-direction> || <flex-wrap> flex-direction: row（初始值） | row-reverse | column | column-reverse flex-wrap: nowrap（初始值） | wrap | wrap-reverse flex-direction定义了弹性项目在弹性容器...
如下我定义ub 和ub-her样式，为了实现几个模块可横轴排列，但是除了谷歌、IE10可以正常显示，IE9及以下浏览器、火狐都无法兼容，求解！！ .ub { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; behavior: url(ie-css3.htc); } .ub-her { -webkit-box-orient: horizontal; /* Safari、Opera 以及 Chrome */ -...
今天闲来无聊，重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说： 为什么还要用mixin呢？为什么不使用Autoprefixer？使用Autoprefixer，只需要输入一行代码，编译器帮你做了一切，还纠结个毛mixin。 姐姐的一句话让我汗颜，我还在思考着如何让Sass来写Gradient，或者类似这样需要带前缀的CSS3属性。也这样让我在思考，那么有了 Autoprefixer这样的后处理，Sass中有关于CSS3的mixins...