<html lang="en">
<head>
<meta charset="UTF-8">
<title>五边形</title>
<style type="text/css">
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid red;
border-bottom: 50px solid transparent;
float: left;
}
#left{
width: 200px;
height: 100px;
background: red;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="triangle-left"></div>
<div id='left'></div>
</body>
</html>
这样可以吗
定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法
transform: none|transform-functions;
旋转 div 元素：
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); / IE 9 /
-moz-transform:rotate(7deg); / Firefox /
-webkit-transform:rotate(7deg); / Safari 和 Chrome /
-o-transform:rotate(7deg); / Opera /
}
CSS3的动画的优点：
1在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）
2代码相对简单
但其缺点也很明显：
1在动画控制上不够灵活
2兼容性不好
3部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。
所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。
最近写一个四周加阴影的项目用到了box-shadow属性，感觉项目里面好多地方都会用到这个属性，于是就专门整理了一下。
语法：
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
为了更清楚的了解box-shadow，做几个demo来给大家演示一下效果：
h-shadow代表的是阴影的水平位置偏移量，可以是正负值
即在x轴的阴影位置，正值阴影出现在右边，负值阴影出现在左边
v-shadow代表垂直阴影位置，即在y轴的阴影位置，可以是正负值
当v-shadow的正值时阴影出现在下面，当v-shadow的负值时阴影出现在上面
blur阴影的模糊距离，这使得阴影部分的过渡看起来更加柔和
spread代表阴影的大小，也是最后一个长度值代表阴影的尺寸。到这里大家心中是不是对blur和spread 产生疑问，其实blur是用于描述模糊半径，它的取值决定了阴影的模糊程度；而spread表示阴影所占区域的大小。
color阴影的颜色值，可以用任何颜色单位的来表示。当我们没有设置颜色值，默认是黑色
默认情况下，设置的阴影都是外部阴影，inset的作用是将外部阴影转换成内部阴影
附：
属性定义及使用说明：
box-shadow属性可以设置一个或多个下拉阴影的框。
兼容性：
CSS3可以使用border-radius属性来绘制出带刻度的水杯。首先，我们需要定义水杯的宽度和高度，然后使用border-radius属性定义水杯的圆角，并使用background-image属性设置背景，使水杯看起来更逼真。接下来，我们使用border属性设置水杯的边框，并使用border-image-slice属性设置水杯的刻度，最后使用box-shadow属性给水杯添加阴影，使水杯看起来更加立体。CSS3中，设置文字阴影的正确写法是（） [多选题]
background-color(正确答案)
background-image(正确答案)
background-repeat(正确答案)
background-position(正确答案)
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）