四年前，看了CSS3 Click Chart这篇文章之后，我第一次发现了calc() ，我当然非常高兴能够看到，基本的数学运算-加法，减法，乘法和除法-能够在CSS中应用。 大部分人可能会觉着预处理就可以实现逻辑运算。但是预处理器只能同单位的运算，如角度单位，时间单位，频率单位，分辨率单元和固定长度单位。而calc()可以实现混合单位的逻辑运算。 1turn总是360deg，100grad始终是90deg，而3.14rad总是180deg。1S始终是1000毫秒，和1k...
text-overflow：clip | ellipsis 这个属性使用必须通过几个属性一块才能使用 1，overflow:hidden; 这个属性是内容区装不下内容应该怎么办。这里让溢出内容直接不显示。这个感觉就是必备的属性。我内容文本溢出全部不显示才能裁剪。不然裁剪之后还是显示溢出就想日狗了 试了下visible. 那text-overflow就不管用了。该溢出还是溢出。管你用没用text-overflow。 2，white-space:nowra...
Web 页面以长方形为主，相比之下，平面媒体在形状方面更具多样性。造成这种差异的原因之一就是，在 web 页面开发中缺少像平面媒体中那样合适的工具。 本文会带你认识 clip-path 属性，这个属性使你能够隐藏元素的某部分，可见区域由设置的参数值所控制。我们先学习基本概念，而后介绍 clip-path 语法，最后来看下更高深的概念。 基本概念 Clipping （裁剪）就是从某物上修剪下一块。在前端中，clipping 就是一种整体或部分地...
CSS3 动画 HTML Ball *{ margin: 0;padding: 0; } .imgBox{ -webkit-transform: scale(3); -webkit-animation-name : 'wobble'; -webkit-animation-duration : 1.5s; -webkit-animation-timing-function : ease-in-out; -webkit-animation-delay : 2s; -webkit-animation-iteration-count : 1; -webkit-animation-direction: normal; } @-webkit-keyframes 'wobble'{ from{ -webkit-transform: scale...
vertical-align 属性设置元素的垂直对齐方式。 可能的值 值 描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 ...
一：css3属性选择器： img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签。 还可以通过设定属性值来缩小匹配范围：如下代码： img[alt="atwi_oscar"]{ border:2px dashed #000;} css3的子字符串匹配属性选择器（1）‘匹配开头’的属性选择器依法如下：Element[attribute^="value"]，实例代码如下： img[alt^="filem"]{ border:2px dashed #000; } (2...
function getStyle(el,cssProp){ if(el.currentStyle){ // ie return el.currentStyle[sccProp]; } else if(window.getComputedStyle){ return window.getComputedStyle(el)[sccProp]; } // return el.style[cssProp];}
CSS选择器之属性选择器 1：[attr] 存在此属性即可 2：[attr = 'attr_value'] 属性值为给定值即可 3：[attr ^= 'attr_value'] attr属性键以container开头 即便是字符串匹配 div[data-type ^= 'container'] { background-color : #000; } 开头存在 container 匹配成功 开头存在 container 匹配成功 不在开头 匹配失败 4：[attr *= 'attr_value'] attr属性键中存在给定的值即可 即便是字符串匹配 div[...
现在手机的占比越来越高，各种酷炫页面层出不穷，这些特效都离不开css动画。说到css动画，主流的情况也就无非这两大类：位移和形变。而我们在写一个动画特效的过程中，如何去提升它的性能呢？当然首先我们需要去了解一下基本的概念，比如浏览器渲染的工作原理等，这些我也在读了几位大牛写的相关文章后才有了一定的了解，这边我也不细说了，有兴趣的同学可以去了解一下。本次的目的简单粗暴地讲，其实就是我们应该使用什么css属性去...
说到这个两个属性::placeholder大家可能都很熟悉,在移动端以及高端浏览器中都有使用,但是:placeholder-shown可能了解的比较少,本篇文章将和大家一起探讨两者的不同及基本应用. placeholder 即”占位符”,在form表单input/ textarea上可以应用placeholder属性,如果你对伪类和伪元素的异同不甚了解,可以参考 “CSS伪类和伪元素的异同”.下面就来讲讲二者的不同: 一. 伪类与伪元素 :placeholder-shown 伪类, Selectors Level 4草...
background-size属性用于指定背景图像的大小。 背景图像可以被设置为覆盖该元素的整个背景区域，或者被设置为由CSS作者所定义的明确的尺寸大小。 可以使用 cover关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用 contain关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例，那么该图像的高度和宽度的固有比率将被保留。 一些 s 有固有的尺寸和...
一、用的少并不代表没有用 至少，在我接触的这么多项目里，没有见到使用过CSS direction属性做实际开发的。 为什么呢？是因为 direction 长得丑吗？ 虽然说 direction 确实其貌不扬，但是CSS并不是一个看脸卖萌的世界。 那是因为兼容性吗？ 那更不是了，在那个“美女”确实是美女的年代，包括IE6在内的浏览器，CSS direction 就已经被支持。 Chrome Safari Firefox ...
预计阅读时间: 29 分钟 一、前言兼目录索引 CSS3动画相关的几个属性是：transition, transform, animation；我分别理解为过渡，变换，动画。 transition指过渡啦，就是从a点都b点，就像过江坐渡轮，是有时间的，是连续的，一般针对常规CSS属性；transform指变换，就那几个固定的属性：旋转啦，缩放啦，偏移啦什么的，与独立于远房亲戚transition使用，但是，效果就是很干涩机械的旋转移动。要是配合transition属性，旋转...
background是用来设置背景的元素，从最早的纯色填充发展到现在，不仅支持渐变，甚至能用上混合模式！今天@不到布这篇好文将一一为你阐释这些子属性的用法，周末学起来！ background 属性是CSS中用于设置元素背景的属性，最简单的background属性名，是针对背景若干设定的合并简写，最早的CSS只能使用单一背景图片，而在现在却可以设置多个背景图片。而不用图片的话，最早的background只能使用纯色填充，现在却可以使用各种渐变效...
问题呈现 Nameofuser-definedcallbackfunctiontobecalledwheneverastreamtriggersanotification. .main{ width: 100px; border: 2px solid red;} 默认情况下,连续的单词如果在一行容纳不下的话会在空格和连字符处换行，那如何让它换行呢? 认识word-break属性 属性值 解释 normal 使用浏览器默认的换行规则(默认) ...