随笔分类 - CSS3
摘要：最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。 writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有区别。 一、CSS3标准 二、实现按钮点击文字下沉效果 我们可以设置文字的writing-
阅读全文
摘要：一、border-radius 最大值100% /* border-radius的最大值是100% */ .block { width: 100px; height: 100px; border: 1px solid red; /* border-radius: 10px 10px 100% 100
阅读全文
摘要：一、Css Blur() blur() CSS 方法将高斯模糊应用于输出图片. 结果为 <filter-function>. radius模糊的半径，值为<length>。 它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空
阅读全文
摘要：一、文本颜色渐变 <gradient> ：可以应用在所有接受图像的属性上，允许使用简单的语法实现颜色渐变，以便UA在渲染页面自动生成图像。 语法：<gradient> = linear-gradient() | repeating-linear-gradient() | radial-gradien
阅读全文
摘要：一、常见留言滚动效果示例 html代码 css代码 @keyframes runItem { 0% { opacity: 0.5; transform: translate(0px, 50px) scale(0.8); } 15% { opacity: 1; transform: translate
阅读全文
摘要：一、外框宽度等比例3个椭圆拼合 显示结果： 二、不等比例3个椭圆 拼合 显示结果： 更多： Css3实现波浪效果2 Css3实现波浪线效果1 HTML5 background-color和background-image问题共用问题
阅读全文
摘要：一、不规则圆，旋转实现波浪效果 二、2个大圆的旋转 三、常见样式 显示效果： 更多： Css3实现波浪线效果1 HTML5 background-color和background-image问题共用问题 CSS网页布局垂直居中整理
阅读全文
摘要：一、波浪线 ，常用 显示效果： 二、波浪线变形 xxx 修改div的高度和背景高度 显示效果： 三、波浪线 加粗 修改div 的高度和背景高度 显示效果： 更多： HTML5 background-color和background-image问题共用问题 CSS网页布局垂直居中整理 CSS3 Fle
阅读全文
摘要：在HTML5中支持背景图片和背景颜色在一个标签中同时渲染。 一般的需求是为元素指定背景颜色，然后在背景色的商品绘制背景图。 支持:Google,FF,IE9以上浏览器。 基本原则：先设置背景图片，再指定背景颜色。 或 注：在使用混合指定方式，不需要考虑顺序。 示例如下： 更多： CSS网页布局垂直居
阅读全文
摘要：一、Flex布局中 Flex Item属性控制，可以指定显示顺序、剩余空间的放大，缩小、交叉轴的排列 1.order:定义项目的排列顺序，数值越小，排列越靠前，默认为0。类似z-index 2.flex：是flex-grow，flex-shrink和flex-basis的简写 3.align-sel
阅读全文
摘要：一、Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式，包裹处理，其中包括了flex-direction属性和flex-wrap属性。 2.justify-content：定义了水平方向的对齐方式 3.align-content：定义了多个轴线的对齐方式。如果只有一根不起作用
阅读全文
摘要：一、说明 1.在以往的布局方案中，都是基于盒装模型，依赖display属性+position属性+float属性等。 他对于那些特殊布局非常不方便，比如，垂直居中等。 并且不同浏览器的盒模型还有些差异，需要考虑兼容等问题。 2.CSS Flexbox Flex布局，可以简便、完整、响应式实现各种页面
阅读全文
摘要：1.animate.css – 齐全的CSS3动画库 http://www.dowebok.com/98.html 2.Angular官方动画库 http://augus.github.io/ngAnimate/ git地址： https://github.com/Augus/ngAnimate 3
阅读全文
摘要：1.指定渐变背景的大小 2.测试渐变背景的动画效果： 结果证明在动画中渐变背景会立刻改变。 3.仿照图片，实现背景的模糊化处理： 背景图： 显示结果： 更多： Css3渐变(Gradients)-径向渐变 CSS3渐变(Gradients)-线性渐变
阅读全文
摘要：CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义。 创建径向渐变，至少定义两种颜色节点，呈现平稳过度的颜色。同时，你也可以指定渐变中心、形状（圆形或椭圆形）、大小。 默认情况下，渐变的中心是center（表示在中心）
阅读全文
摘要：CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度，包括透明度。 以前，你必须使用图像来实现这些效果。但是，通过Css3渐变(Gradients)，你可以减少下载的事件和宽带的使用。此外，渐变效果元素在放大时看起来效果更好，因为渐变(gradient)是由浏览器生成的。
阅读全文
摘要：CSS3条件判断，听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话，你会发现CSS中的“@media”就是条件判断之一。是的，在CSS3的条件判断规范文档中包含了两个部分，其一是“@media”规则，主要用来“根据媒体属性区分样式表”(特别是在Responsive设计中，发挥的作用更是强大)；其二
阅读全文
摘要：1.演示地址： http://yaochuxia.github.io/hover/#
阅读全文
摘要：定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 语法 box-sizing: cont
阅读全文
摘要：CSS2中色彩模式只有RGB色彩模式（RGB即RED、Green、BLue）和十六进制（Hex）模式，为了能支持 透明opacity 的Alpha值，CSS3又增加了RGBA色彩模式（RGBA即RED、Green、BLue、Alpha）。 但是不管是RGB模式还是十六进制模式都无法主观感受，所以CS
阅读全文