• 在HTML和CSS当中运用显示隐藏

    1.显示与隐藏

    1. 盒子显示:display:block;
    2. 盒子隐藏:

        display:none:隐藏该元素并且该元素所占的空间也不存在了。

        visibility:hidden:隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。

    2.圆角边框

    在CSS2中添加圆角，我们不得不使用背景图像，在 CSS3中使用border-radius属性将很容易创建圆角。 border-radius属性是一个简写属性，用于设置四个border-radius属性。

    语法:

    border-radius:top-left top-right bottom-left bottom-right;

    可能的值:

    1. 一个值:设置四个角的圆角大小;
    2. 两个值:设置左上和右下 右上和左下的圆角大小;
    3. 三个值:设置左上、右上和左下、右下的圆角大小;
    4. 四个值:设置左上、右上、右下、左下的圆角大小。

     border-radius的值可以是具体的数值也可以是百分比。

    实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         .box1{
    9.             width: 300px;
    10.             height: 300px;
    11.             background-color: blueviolet;
    12.             border-radius: 50px ;
    13.         }
    14.         .box2{
    15.             width: 300px;
    16.             height: 300px;
    17.             background-color: rgb(57, 203, 214);
    18.             border-radius: 50% ;
    19.         }
    20.     </style>
    21. </head>
    22. <body>
    23.      <div class="box1"></div>
    24.      <div class="box2"></div>
    25. </body>
    26. </html>

     

    3.Overflow属性

    overflow属性规定当内容溢出标签框时的显示方式，包括水平方向和垂直方向。

     overflow-x只包括水平方向。

     overflow-y只包括垂直方向。

    可能的值:

    1. visible 默认值。内容不会被修剪，会呈现在标签框之外。
    2. hidden 内容会被修剪，并且其余内容是不可见的。
    3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

    注意：overflow属性仅适用于具有指定高度的块元素。

    4.透明度属性(opacity,rgba())，透明度兼容

    实现透明的CSS方法通常有以下3种方式，以下是不透明度都为80%的写法。

     CSS3的opacity:x，x的取值从0到1，如opacity:0.8;

    CSS3 的rgba(red, green,blue,alpha)，alpha的取值从0到1，如rgba(255,255,255,0.8) ；

    IE专属滤镜 filter:Alpha(opacity=x)，x的取值从0到100，如 filter:Alpha(opacity=80)。

    1. opacity

    1、兼容性:IE6、7 8不支持，IE9及以上版本和标准浏览器都支持。

    2、使用说明:设置 opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整不透明度。

    2. rgba()

    1、兼容性:IE6、7、8不支持，IE9及以上版本和标准浏览器都支持。

    2、使用说明:设置颜色的不透明度，一般用于调整 background-color、color等的不透明度。 IE6 和部分 IE7 内核的浏览器 ( 如 QQ 浏览器)会读懂 rgba，解析后颜色为透明，其实应该是 null那么使用opacity实现背景透明，文字不透明是可取的。

    3.IE 专属滤镜filter:Alpha(opacity=x)

    1、兼容性:仅支持IE6、7、8、9，在IE10 版本被废除。

    2、使用说明:IE 浏览器专属，问题多，如下:

    255,0.8); 在IE6、7中，需要激活IE 的 haslayout 属性(如:*zoom:1 或者 *overflow:hidden)，让它读懂 filter:Al-

    pha

    0)。

    在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位可让子元素不透明。

  • 相关阅读:
    云原生-FRP内网穿透（详解）使用云服务器将内网集群服务暴露至公网（二）
    请描述JDK和JRE的区别 ？
    S7COMM协议分析
    C语言之ASC转hex
    taro 兼容支付宝小程序和微信小程序＜七＞-- 上传图片及图片转base64
    ​草莓熊python turtle绘图代码（玫瑰花版）附源代码
    mongodb固定集合(Capped Collections) | MongoDB 自动删除集合中过期的数据——TTL索引
    Mybatis——Mybatis入门项目从创建到完成的完整过程【单表的增删改查】
    linux查看日志文件内容命令sed、cat、tac、more、less、head、tail、echo 1、按时间查询
    mysql explain extra值枚举
  • 原文地址：https://blog.csdn.net/J3259392566/article/details/139283060