前端-盒子显隐-overflow属性-盒子阴影-2d形变

最新推荐文章于 2022-11-30 23:25:56 发布

zdc45625

最新推荐文章于 2022-11-30 23:25:56 发布

阅读量449

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/zdc45625/article/details/86582704

版权

本文详细探讨了前端开发中的盒子样式，包括盒子显隐的实现，overflow属性的使用，如何设计边框的伪类，创建盒子阴影效果，以及2D变形的应用，并通过实例进行讲解。

摘要由CSDN通过智能技术生成

文章目录

字体图标

fa框架: http://fontawesome.dashgame.com/

下载 => 引入css文件

<i class="fa fa-**"></i>

盒子显隐

1.显示效果
display: none; # 没有任何显示效果
消失的时候在页面中不占位，显示的时候在页面中占位

2.盒子透明度
opacity: 0; # 所在区域留白
消失显示在页面中都占位

只要盒子在页面中有占位，就会影响其他盒子布局，所以显隐的盒子都需要中定位处理

opacity可以动画处理，display不能动画处理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子显隐</title>
    <style>
        div {
    
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 10px;
        }
        /*消失的时候在页面中不占位，显示的时候在页面中占位*/
        .div1 {
    
            display: none;
            position: absolute;
            /*display不能过度动画 => 原因none与block是两个状态点(中间找不出存在的第三个状态点)*/
            transition: 2s;
        }
        .ctrl:hover ~ .div1 {
    
            display: block;
        }

        /*消失显示在页面中都占位*/
        .div2 {
    
            /*盒子的透明度*/
            opacity: 0;
            /*背景颜色透明，文本层依然显示*/
            /*background-color: rgba(0,0,0,0);*/
            position: absolute;
            /*opacity能过度动画 => 0~1之间可以找出多个中间点，比如0.5*/
            transition: 2s;
        }
        .ctrl:hover ~ .div2 {
    
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="ctrl">控制</div>
<!--<div class="div1">001</div>-->
<div class="div2">002</div>
<!--<div class="div3">003</div>-->
</body>
</html>

overflow属性

解决: 超出盒子规定的显示区域外的内容的处理方式

/*将超出规定区域的内容隐藏，隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/

/*不超出正常，超出滚动，两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/

/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>overflow属性</title>
    <style>
        div {
    
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top

最低0.47元/天解锁文章

zdc45625

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-盒子显隐-overflow属性-盒子阴影-2d形变

文章目录字体图标盒子显隐overflow属性伪类设计边框盒子阴影2d形变形变案例字体图标fa框架: http://fontawesome.dashgame.com/下载 =&gt; 引入css文件&lt;i class="fa fa-**"&gt;&lt;/i&gt;盒子显隐1.显示效果display: none; # 没有任何显示效果消失的时候在页面中不占位，显示的时候在页...
复制链接

扫一扫

专栏目录