您的位置：首页 > Web前端 > CSS

css3常用基础

2015-08-04 19:48 423 查看

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.parent {

border: 1px solid red;

height: 60px;

margin: 5px;

}

.son {

border: 1px solid red;

height: 20px;

}

.descendant {

border: 1px solid red;

height: 10px;

background-color: green;

}

/*

元素选择器:其中E是元素，也是选择器(E表示element元素的意思)

E {...}

=============================================================

class选择器:其中E是元素选择器，E.class是元素选择器和类选择器的复合选择器

E.class {...}

比如：div.son

=============================================================

属性选择器：E表示元素选择器

E[attr=value]或E[attr]

比如：div[id=abc]

=============================================================

子选择器：其中selector1、selector2都是有效的选择器

selector1>selector2 {...}

*/

.parent>div.son {

background-color: yellow;

}

</style>

</head>

<body>

<div class="parent">

<div class="son">

<div class="descendant"></div>

</div>

<div class="son"></div>

</div>

</body>

</html>

transform：2D转3D

translate(tx, ty)
	该函数设置html组件横向移动tx距离，纵向移动ty距离。如果ty省略那么，默认是0。
	translate(tx) -> translateX(tx)
	translate(ty) -> translateY(ty)

rotate(angle)单位是deg
	该函数设置html组件顺时针旋转angle角度

scale(sx, sy);
	该函数设置设置HTML组件上横向缩放比为sx，纵向缩放比为sy，如果只写一个参数，sy省略，默认是1。
	另外如果你写scale(sx) 也可写作 scaleX(sx)
	scale(sy) 也可写作scaleY(sy)

skew(sx, sy)
	该函数设置html组件沿着x轴倾斜sx角度，沿着y轴倾斜sy角度
	skewX(sx) skewY(sy)

4种属性可以相互组合达到想要的效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航