关于前端开发CSS3技术经验分享-爱站

最近归纳了前端的一些知识，便于以后查看，同时与大家分享。希望少走弯路。知识)这篇文章主要总结了CSS3中的相关知识，希望有需要的朋友可以参考，对你有用。

1、设置字体（兼容所有浏览器）

@font-face {
font-family: 'iconfont';
src: url("fonts/iconfont/iconfont.eot");
src: url("fonts/iconfont/iconfont.eot?#iefix") format("embedded-opentype"), 
url("fonts/iconfont/iconfont.ttf") format("truetype"), 
url("fonts/iconfont/iconfont.woff") format("woff"),
 url("fonts/iconfont/iconfont.svg#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
@font-face { font-family : name ; src : url( url ) ; sRules }

说明：

name : 　字体名称

url : 　使用绝对或相对地址指定OpenType字体

sRules : 　样式表定义

设置嵌入HTML文档的字体。

@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }

2、div[class^=”test”]

设置只有div内 class 属性值以 “test” 开头的所有 div 元素的背景色：

div[class^="test"]
{
background:#ffff00;
}

3、 [class*=”abc”]

class的值中含有”abc”的元素。

div[class*="abc"]

代表只有div内class=abc的样式

4、指定最后一个p标签背景样式

p:last-child{ background:#ff0000;}

5、显示设备分辨率最小768并且最大979时候显示abc（CSS3）

@media (min-width: 768px) and (max-width: 979px) {
.abc{}
}

ie6-ie9支持

<style>
@media screen and (min-width: 1201px) {
.y-row {
width: 1200px;
border:1px solid #333; height:300px;
min-width: 1200px; } }
@media screen and (max-width: 1200px) {
.y-row {
width: 900px;
border:1px solid #333; height:300px;
min-width: 900px; } }
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

6、div > span （IE6不支持）

div > span{字体12px}

div标签内的儿子span样式为字体12px，div内孙子span不起作用，具有优先

7、字体阴影

.blue { background:#01dbff; text-shadow:2px 2px 2px #09a5ef; }

阴影字体靠左距离靠下距离阴影距离范围阴影颜色

字体背景+字体阴影

8、盒子阴影

-moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; border-radius:0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow:0px 0px 1px #fff inset;

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性

-o代表opera苹果浏览器

设置

border-radius:0px 5px 5px 0px; 代表边框右上和右下圆角为5px

box-shadow:0px 0px 1px #fff inset;代表边框间距靠左0 靠上0 和1px阴影范围阴影颜色为白色

有inset 代表框内阴影不带inset 代表框外阴影

注意：box-shadow:0px 0px 1px #fff

第1个值为0时，代表左右边框阴影为1px范围

第1个值为正整数代表左边框阴影

第1个值为负整数代表右边框阴影