随笔分类 - CSS3
摘要：一： CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。 为了支持IE8，许多目前许多情况还是使用单个冒号，显示效果一样 Selectors选
阅读全文
摘要：Windows10操作系统使用实例： 1.准备好对应格式的字体库 2.方正字体使用实例 IE下显示结果： Google/FF下显示结果： Android系统下的浏览器访问： 3.花纹行楷字体使用： IE/Google/FF显示结果：
阅读全文
摘要：1.字体现在网站： http://ztxz.org/ 2.Web字体在线格式转换器： http://www.freefontconverter.com/ 3.
阅读全文
摘要：1、在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。 浏览器中展示网页文字内容时，文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族？字体族就是你在css代码中看到“font-f
阅读全文
摘要：@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了！肯定会有人问，这样的东西IE能支持吗？我告诉大家@font-face这个功能其实早在IE4就支持了，你肯
阅读全文
摘要：pointer-events的风格更像JavaScript，它能够： 1.阻止用户的点击动作产生任何效果.阻止缺省鼠标指针的显示3.阻止CSS里的hover和active状态的变化触发事件4.阻止JavaScript点击动作触发的事件 一些需要注意的关于pointer-events的事项： 1.子元
阅读全文
摘要：一.语法：background-size： [ , ]* = [ | | auto ]{1,2} | cover | contain默认值：auto取值：：用长度值指定背景图像大小。不允许负值。：用百分比指定背景图像大小。不允许负值。auto：背景图像的真实大小。cover：将背景图像等比缩放...
阅读全文
摘要：实例规定属于其父元素的第二个子元素的每个 p 的背景色：p:nth-child(2){background:#ff0000;}浏览器支持所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。定义和用法:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，...
阅读全文
摘要：简单参数设置一1.html 2.css .divSmall { float: left; margi...
阅读全文
摘要：一：border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的： .demo { border-radius: 10px; } 其等价于： .demo{ border-top-left-radius: 10px; border-top-right-radius: 10px;
阅读全文
摘要：如今CSS3中的border-radius出现后，让我们没有那么多的烦恼了，首先制作圆角图片的时间是省了，而且其还有多个优点：其一减少网站的维护的工作量，少了对图片的更新制作，代码的替换等等;其二、提高网站的性能，少了对图片进行http的请求，网页的载入速度将变快；其三增加视觉美观性。既然borde
阅读全文
摘要：谈谈box-shadow的具体使用方法语法：E {box-shadow: ??||}也就是：E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}换句说：对象选择器 {box-shadow:投影方式 X轴偏移量...
阅读全文
摘要：实例一：1.html 2.css .divOne { margin-left: 30px; floa...
阅读全文
摘要：Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动trans
阅读全文
摘要：W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。” 下面我们同样从其最语法和属性值开始一步一步来学习trans
阅读全文
摘要：CSS3用户界面在CSS3中，新的用户界面特性包括重设元素尺寸，盒尺寸以及轮廓等。用户界面属性：resizebox-sizingoutline-offset浏览器支持属性浏览器支持resizebox-sizingoutline-offsetFirefox、Chrome 以及 Safari 支持 resize 属性。Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。CSS3 Resizing在
阅读全文
摘要：CSS3多列通过CSS3，能够创建多个列来对文本进行布局-就像报纸那样。多列属性：column-countcolumn-gapcolumn-rule浏览器支持属性浏览器支持column-countcolumn-gapcolumn-ruleIE10和Opera支持多列属性。Firefox需要前缀-moz-. Chrome和Safari需要前缀-webkit-.注释：IE9以及更早的版本不支持多列属性。CSS3创建多列column-count属性规定元素应该被分隔的列数： div.columnOne { width:210px; heigh...
阅读全文
摘要：CSS3 动画 通过CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及Javascript。 CSS3 @keyframes规则 如果在CSS3中创建动画，你需要学习@keyframes规则。 @keyframes规则用于创建动画。在@keyframes中规定某项CSS样
阅读全文
摘要：CSS3 过滤 通过CSS3，我们可以在不适用flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 浏览器支持 属性浏览器支持 transition IE10、Firefox、Chrome以及Opera支持transition属性。 Safari需要前缀-
阅读全文
摘要：CSS3允许你使用3D转换来对元素进行格式化。3D转换方法：rotateX()rotateY()浏览器支持属性浏览器支持transformIE10和Firefox支持3D转换。Chrome和Safari需要前缀-webkit-.Operate仍然不支持3D转换。1.rotateX()方法通过rotateX()方法，元素围绕X轴以给定的度数进行旋转。 div.rotateXTwo { background-color: red; transform: rotateX(120deg); }2.rotateY()旋转通过rota...
阅读全文