CSS 学习笔记

1.绘制三角形

方法：设定一个div，它的宽高都是0px（使得它的border填充满它的内部），给定border的宽度（即三角形的高），不需要展示的border颜色设置为透明（transparent），只需要设置绘制三角形所需要的三条border即可，例如：

.trangle {
    height: 0px;
    width: 0px;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

2.绘制心形

在正方形上使用两个伪元素::bofore和::after，定位好圆形的位置后，再将整体逆时针旋转45°得到心形，具体代码如下：

div {
    position: relative;
    width: 100px;
    height: 100px;
    transform: rotate(-45deg);
}
div::before {
    position: absolute;
    top: -50px;
    left: 0px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    content: ''
}

div::after {
    position: absolute;
    top: 0px;
    left: 50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    content: ''
}

3.多行文本省略

//必须结合的属性，将对象作为弹性伸缩盒子模型显示
display: -webkit-box;
//必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;
//用来限制在一个块元素显示的文本的行数
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;

4.手动设置图片以最短边为依据展示在父组件中

方法一：将图片设置为父组件的背景图片

div {
    width:100px;
    height:100px;
    background:url('6.jpg') no-repeat center;
    background-size: cover;
}

方法二：

div {
    object-fit: over;
}

img {
    width: 100%;
    height: 100%
}