在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。 一.旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。 二.缩放 scale 用法：transform: scale(0.5) 或者 transform: scale(0.5, 2); 参数表示缩放倍数； 一个参数时：表示水平和垂...
p[name]{background:red;} 只使用属性名p[name=ghr]{background:red;} 指定属性名，并指定了该属性的属性值p[name~=old]{background:red;}此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词p[name^=g]{background:pink;}属性值是以g开头的p[name$=M]{background:#CC0;}属性值是以M结尾的p[name*=d]{background:#C3C;}属值中包含了valuep[name|=b]{background:#C3C;}属性值是value或者以“value-”开头的值（比...
今天闲来无聊，重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说： 为什么还要用mixin呢？为什么不使用Autoprefixer？使用Autoprefixer，只需要输入一行代码，编译器帮你做了一切，还纠结个毛mixin。 姐姐的一句话让我汗颜，我还在思考着如何让Sass来写Gradient，或者类似这样需要带前缀的CSS3属性。也这样让我在思考，那么有了 Autoprefixer这样的后处理，Sass中有关于CSS3的mixins...
对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。 font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。 但是，我们可以用以下两种定义进行抗锯齿渲染 -webkit-font-smoothing: antialiased; /*chrome、safari*/-moz-osx-font-smoothing: grayscale;/*firefox*/ （1）Webkit在自己的引擎...
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用 HTML标签即可 一、CSS display属性的表格布局相关属性的解释： table 此元素会作为块级表格...
二维码.jpg 0.今日课程大纲 服务器端字体: font-face 轮廓: outline 缩放属性: resize 分栏布局: column 弹性布局: flex-box 1. 服务器端字体 font-face 我们在第三天CSS 样式中，学习了一个属性叫做 font-family,他的作用是定义你所使用的字体具体是哪一种，但是仅对有对应字体的电脑有效。例如常见的字体有宋体或者黑体等，这些我们的电脑一般系统自带的字体库中都会直接安装好。 但是我...
1.用CSS.supports()方法 mark-zhq[3] //判断是否支持flex布局var supportsFlex = CSS.supports("display", "flex");//判断是否支持rem单位var supportsRem = CSS.supports("width","1rem");//判断兼容性属性var supportsAPS = CSS.supports("animation-play-state")||CSS.supports("-webkit-animation-play-state")||CSS.supports("-ms-animation-play-state")||CSS.supports("-Moz-animation-play-state")||CSS.suppo...
1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则，通配符的使用提高了样式表的书写效率，也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总结：CSS选择器和jQuery的选择器非常相似，学好CSS选择器会让我们学习jQuery事半功倍
四年前，看了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];}