CSS小记（含CSS3）（学习笔记）

一、解决父元素高度塌陷以及父元素外边距重叠（兼容IE6）

.clearfix:before,
.clearfix:after {
       content : "" ;
       display : table ;
       clear : both ;
}
.clearfix {
       zoom : 1;
}

二、CSS三角形

主要是控制边框线宽变换而来，把不需要部分的颜色设为透明（transparent）
1. 实心三角形

**HTML**
<html>
    <head>
        <meta charset="utf-8">
        <title>三角形</title>
    </head>
    <body>
        <div></div>
    </body>
</html>

**CSS**
div {
    border : 100px solid transparent;
    width : 0px;
    height : 0px;
    border-left-color : blue;
    border-top-width : 0px;
}

2. 空心三角
空心三角形与其他三角形做法
空心的三角形同理，在当前的三角形后面添加一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割

**CSS**
div:after {
    content: '';
    position: absolute;
    top: -89px;
    left: 2px;
    border-top: 89px solid transparent;
    border-right: 99px solid #FFFFFF;
    border-bottom: 99px solid transparent;
}

三、CSS引入方式

  1. 内联样式，style属性；
  2. 将<style>样式写到<head>标签中；
  3. link标签链接外部样式表；
  4. 样式表引入另外一个样式表 @import url(路径)；

四、CSS3

1. linear gradient（渐变）

  • linear gradient generator (自生成工具)
    作用：可以调好渐变效果，直接生成渐变代码。

2. @keyframes（动画）

p{
   animation-duration: 3s;
   animation-name: slidein;
}

@keyframes slidein{
    from{
         margin-left: 100%;
         width: 300%；
    }

    to{
         margin-left: 0%;
         width: 100%；
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容