前言webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这2个滚动条demo： demo1（图片版）、demo2（纯CSS3版）滚动条组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚...
首先我们了解下什么是css3，css3是css技术的一个升级。css3中并没有采用总体结构，而是采用分工协作的模块化结构。css3中的模块模块名称功能描述basic box model定义各种与盒相关的样式line定义与各种直线相关的样式speech定义各种与声音有关的样式，譬如音量、音速、说话间歇时间等属性background and border定义各种与背景和边框相关的样式 text定义各种与文字相关的样式color定义各种与颜色相关的样式font定义各种与字体相关...
#rcorners1 {border-radius: 25px;background: #8AC007;padding: 20px;width: 200px;height: 150px; }#rcorners2 {border-radius: 25px;border: 2px solid #8AC007;padding: 20px;width: 200px;height: 150px; }#rcorners3 {border-radius: 25px;background: url(/images/paper.gif);background-position: left top;background-repeat: repeat;padding: 20px;width: 200px;height: 150px; }#rcorners4 {border-radius:...
Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： 复制代码代码如下:<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />或者这样的形式： 复制代码代码如下: <style type="text/css" med...
css3 box-sizing属性box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。content-box，border和padding不计算入width和height之内，浏览器默认也是这样padding-box，padding计算入width内border-box，border和padding计算入width之内，其实就是怪异模式了~ ie8+浏览器支持content-box和border-box；ff则支持全部三个值。 案例 #a1{width:500px;padding: 10px;border:1px solid #ee240f;}问...
nternet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 以及更早的版本不支持多列属性。column-count 属性规定元素应该被分隔的列数：column-gap 属性规定列之间的间隔：div { -moz-column-rule:3px outset #ff0000; /* Firefox */ -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ column-rule:3px outset #ff0000; }column-coun...
在CSS中，与媒体相关的样式定义是从CSS2.1开始的。CSS2.1中定义了各种媒体类型，包括显示器、便携设备、电视机，等等。 CSS3中加入了Media Queries模块，该模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式。换句话说，允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。 我们知道，在不同的设备中，浏览器的窗口尺寸可能是不...
.ribbon {background: #45c9c8;position: absolute;width: 75px;height: 25px;line-height: 25px;top: -4px;left: -11px;font-size: 14px;color: #fff;text-align: center;font-style: normal;z-index: 1;&:after{content: "";position: absolute;width: 0;height: 0;border-left: 12px solid transparent;border-top: 5px solid #329c9b;top: 25px;left: 0px;z-index: 0;}&:before{content: "";position: absolute;right: -10px;f...
h5增加特性 语义标签化如 section article meter footer progress等等html代码h5增加了重要的自定义属性的功能；给标签添加自定义属性 必须以data-开头自定义的属性 需要通过 dateset[]方式来获取如自定义属性 data-box获取自定义属性 dataset设置自定义属性 dataset[“box”];<!-- 定义数据列表—><datalist id="sex"> <option >男</option> <option >女</option> <option >不祥</option></datalist><!—定义度量器—><...
1、属性选择器：实例展示：html代码：<a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我的title是more</a>css代码：a[class^=icon]{background: green;color:#fff; } a[href$=pdf]{background: orange;color: #fff; } a[title*=more]{background: blue;color: #fff; } 结果显示：2、结构性伪类选择器1、—root:root选择器，从字面上我们就可以很清楚的理解...
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>使用transform和transition制作CSS3动画</title> <style> ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;} /* HTML ELEMENTS */ body { background-color:#deddcd; font:14px/21px Arial,Helvetica,sans-serif; } h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; col...
transform是一个属性，本质跟width,height是一样的，加上transform也就是为类增加一个变换属性。transition是一个属性，它是用来控制过渡效果的，因为用transform可以增加变换效果，而那个变换是瞬间突变，如果想让这个变化是平滑的、过渡型的，则要用transition来控制，设定要控制的属性和过渡的时间即可。animation是动画效果，要先用@keyframes定义一个动画过程，然后在类中用animation的各个参数制定想要添加的动画名称，运行时...
格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+NoOgg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 <video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4"> Your b...
20款CSS3鼠标经过文字背景动画特效站长之家 -- HTML5特效索引 30个酷毙的交互式网站(HTML5+CSS3) 原文：http://www.cnblogs.com/sunbeidan/p/7602940.html
接着是对图形移动、旋转、倾斜、放缩的处理。 -moz-transform:translateX(x deg) translateY(x deg);/*图形会沿着XY轴移动*/ -moz-transform:rotate(x deg);/*图形绕着原点旋转当然也可以改成XY轴*/ -moz-transform:skew(x deg);/*图形倾斜*/ -moz-transform-origin:0% 0%;/*改变坐标原点在图形中的位置*/ -moz-transform:scale();/*对图形放缩大于1是放大，小于1大于0是缩小，小于0会有反转的效果然后放...