社区
掘金
学习内容
- 盒子边框样式的使用技巧------三角形
- CSS3特效之过度属性
1、三角形
盒子的边框应用属性非常多，能画圆，画框，画三角等，仔细观察盒子的四条边框可以发现其实四条边框的连接数是一条平滑的斜线，那么利用这个属性可以画出你想要的三角形，其边框示例效果如下：
<style>
.t1 {
width: 50px;
height: 50px;
border-width: 20px 20px 20px 20px;
border-style: solid;
border-color: red green blue pink;
}
</style>
<body>
<div class="t1" >
</div>
</body>
带边框的三角形
由于不能给已经三角形化的盒子再设置边框的，那么只能用定位和覆盖来让一个小的三角形盖到大的三角形上面形成一个带边框的三角形了，为了减少标签的使用那么就是用伪元素::after来完成，示例如下：
<style>
.t5 {
width: 0px;
height: 0px;
border-width: 0px 50px 50px 50px;
border-style: solid;
border-color: transparent transparent yellow transparent;
position: relative;
}
.t5:after {
content: "";
display: inline-block;
width: 0px;
height: 0px;
border-width: 0px 44px 44px 44px;
border-style: solid;
border-color: transparent transparent red transparent;
position: relative;
top: 3px;
left: -44px;
}
</style>
<body>
<div class="t5" >
</div>
</body>
2、CSS3 属性过渡（transition）
- transition-property 需要过渡的属性,默认 all,可添加自定义过渡属性如 width,height,border-radius,color 等
- transition-delay 过渡的延迟时间，即动画变换的延迟时间
- transition-duration 过渡的时间，即完成过渡动画的时间
- transition-timing-function 时间曲线默认为 ease（逐渐慢下来），linear（匀速），ease-in（加速），ease-out（减速），ease-in-out（先加速后减速）
- transition 属性连写，最重要的一点是过渡时间属性必须要写，其他的都是默认，值得一提的是 延迟时间默认为 0;
- 要想实现过渡特效需要设置条件出发，比如:hover,:active等
下面写几个过渡效果：
过渡效果1
鼠标放到我身上!!!
```HTML
鼠标放到我身上!!!
```
**过渡效果2**
鼠标放到我身上!!!
```HTML
鼠标放到我身上!!!
```
(ﾟдﾟ)σ弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌⊃