使用CSS3(一)

开发商前缀（vendor prefix）

前缀 浏览器 -moz- Firefox -webkit- Chrome和Safari（它们的引擎都是WebKit） -ms- Internet Explorer -o- Opera

媒体查询

根据不同的设备和浏览设置选择不同的样式表，max-width属性，当前窗口中页面的宽度。max-device-width属性，这个属性检测的是最大的屏幕宽度。

语法： @media (media-query-property-name: value) { /*这里是新样式*/ } 实例1：/*当浏览器宽度小于768px时，就使用里面的样式*/ @media screen and (max-width:768px){ .g-doc{width:95%;margin:0 auto;} .g-sd{width:100%;padding-bottom:30px;border-radius:4px;background:#6666CC;} .g-mn{padding:10px 1px 50px 1px;width:100%;border-radius:4px;} } 实例2: /*窗口宽度介于600像素到700像素之间时，使用新样式*/ @media (not max-width: 600px) and (max-width: 700px) { 这里是新样式代码 }

透明

实现透明效果的方法有两种。 第一种是使用rgba()函数，它接收4个数值作为参数。前三个值分别代表色彩中的红、绿、蓝分量，取值范围为0～255。最后一个值是alpha（不透明度）值，取值范围为0～1；0表示完全透明，1表示完全不透明。

background: rgba(170,240,0,0.5);

第二种使用opacity属性，这个属性的原理与alpha值一样（opacity这个单词的意思就是不透明）：取值范围为0～1；0表示完全透明，1表示完全不透明：

background: rgb(170,240,0); opacity: 0.5;

border-radius属性

radius（半径）指的是圆角的半径，最终结果显示只有水平和垂直线这两条切线和部分圆弧。

border-radius: 25px 50px 25px 85px;

如果要每个角的两边不一样，需要单独设定每一个角（使用比如border-top-left-radius这样的属性），然后提供两个值：一个是水平半径，另一个是垂直半径。可以创建出形状各异的盒子

border-top-left-radius: 150px 30px; border-top-right-radius: 150px 30px;

盒子阴影和文本阴影

盒子阴影 语法： box-shadow:h-shadow v-shadow [blur模糊距离] [spread阴影尺寸] [color] [insert 内部阴影] 实例： box-shadow: 5px 5px 10px 5px gray insert; 文本阴影 语法： box-shadow:h-shadow v-shadow [blur模糊距离] [color] 实例： text-shadow: 5px 5px 10px gray ;

渐变

创建线性渐变：使用linear-gradient()函数

创建一个从上到下，从白到蓝的渐变效果： background: -moz-linear-gradient(top, white, blue); 创建从左上角到右下角的渐变： background: -moz-linear-gradient(top left, white, lightblue)； 使用渐变点（gradient stop）控制每个颜色的起点。每个渐变点用百分比值表示，0%就是整个渐变的起点，而100%则是整个渐变的终点： background: -moz-linear-gradient(top, red 0%, orange 20%, yellow 80%, violet 100%);

创建放射性渐变：使用radial-gradient()函数。

background: -moz-radial-gradient(circle, white, lightblue)；

转载于:https://www.cnblogs.com/YeChing/p/6247224.html