第八十四节，css布局小技巧

Posted 2020-08-15

css布局小技巧

图片鼠标放上去遮罩效果，显示文字

当鼠标放上去时

/*最外层div*/
.a{
    width: 384px;
    height: 240px;
    background-color: #ff4e37;
    position: relative;
}
/*插入图片的div*/
.b{
    width: 384px;
    height: 240px;
    background-color: #ff4e37;
    overflow: hidden;
}
/*遮罩层div*/
.c{
    width: 384px;
    height: 240px;
    background-color: #010008;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
/*鼠标放上去效果*/
div .c:hover{
    background-color: #010008;
    opacity: 0.5;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 240px;
}


<div class="a">
    <div class="b">
        <img src="53d.jpg">
    </div>
    <div class="c">
        <samp>美女图片</samp>
    </div>
</div>

 

css绘制尖角效果

在网页中，有很多地方会用到尖角，尖角可以是图片的，也可以用css来绘制

用一个div来绘制尖角

.a{
    /*设置边框*/
    border-top: 30px solid red;
    border-right: 30px solid black;
    border-bottom: 30px solid green;
    border-left: 30px solid blue;
    /*将区块转换成内联块*/
    display: inline-block;
}

<div class="a"></div>

效果：颜色可以根据自己的需要调整

 

将其他不需要的3个尖角颜色改成透明的，一个尖角就形成了

.a{
    /*设置边框*/
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid blue;
    /*将区块转换成内联块*/
    display: inline-block;
}

<div class="a"></div>

效果：

 

另一种效果

.a{
    /*设置边框*/
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 30px solid blue;
    /*将区块转换成内联块*/
    display: inline-block;
}

<div class="a"></div>

  效果：

 

 

还可以结合伪类选择器:hover来设置鼠标动作尖角

.af{
    width: 100px;
    height: 50px;
    background-color: #ff563a;
}
.a{
    /*设置边框*/
    border-top: 10px solid green;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    /*将区块转换成内联块*/
    display: inline-block;
    margin-top: 20px;
    margin-left: 10px;
}
.a:hover{
    /*设置边框*/
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid green;
    border-left: 10px solid transparent;
    /*将区块转换成内联块*/
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
}

<div class="af">
    <div class="a"></div>
</div>

效果：鼠标没放上去时尖角向下，鼠标放上去尖角向上