2020-10-26 firstday

最新推荐文章于 2024-07-16 20:50:21 发布

XQ_corn

最新推荐文章于 2024-07-16 20:50:21 发布

阅读量113

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/XQ_corn/article/details/109291118

版权

1.上下左右边框的显示：border，有三个参数：颜色、大小、线条样式。

    width: 211px;
    height: 184px;//设置宽度高度
    border: 1px #ffffff solid;
    border-style: none solid;//上下边框不显示，左右为实线

出现问题：会有黄色错误提示，并且下面的代码不会实现。

再次尝试其他的方式：


    width: 211px;
    height: 185px;
    border: 1px #ffffff solid;
    border-width: 0 1px;

这样也会出现以上问题。

最后找到以下方法：

    border: 1px #ffffff solid;
    border-top: none;
    border-bottom: none;//先设置样式，后取消上下边框样式

    margin: 50px 30px;
    border-top: 1px #ffffff solid;
    border-bottom: 1px #ffffff solid;

2.overflow的设置方法

1）在鼠标移动到一个位置上应该显示的那个盒子的父盒子里面设置overflow: hidden;然后在显示盒子css里面显示

position: relative; z-index: 2; left: -500px;

HTML代码
<body>
    <div class="wrap">
        
        <!-- 图片 -->
        <div class="imgbox">
            <img src="./pic/hairDryer.jpg" alt="">
        </div>

        <!-- 鼠标移动到上面图片上应该显示的部分 -->
        <div class="container">
            <div class="border1">
            </div>
            <div class="border2">
            </div>
        </div>

    </div>

</body>

css部分代码：

.wrap{
    width: 330px;
    height: 272px;
    margin: 0 auto;
    margin-top: 100px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}



.container{
    background: #2b2b2c;
    opacity: 0.4;
    width: 311px;
    height: 245px;
    margin: 15px 10px;
    margin-top: -264px;
    float: left;
    position: relative;
    z-index: 2;
    left: -500px;
}

2）鼠标移动到图片上显示的部分css代码

.container:hover{
    background: #2b2b2c;
    cursor: pointer;
    transition:all .5s ease-in-out;
}

XQ_corn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-10-26 firstday

1.上下左右边框的显示：border，有三个参数：颜色、大小、线条样式。 width: 211px; height: 184px;//设置宽度高度 border: 1px #ffffff solid; border-style: none solid;//上下边框不显示，左右为实线出现问题：会有黄色错误提示，并且下面的代码不会实现。再次尝试其他的方式： width: 211px; height: 185px; border: 1px
复制链接

扫一扫