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

1.显示与隐藏

盒子显示:display:block;
盒子隐藏:

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

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

2.圆角边框

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

语法:

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

可能的值:

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

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

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            border-radius: 50px ;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: rgb(57, 203, 214);
            border-radius: 50% ;
        }
    </style>
</head>
<body>
     <div class="box1"></div>
     <div class="box2"></div>
</body>
</html>

3.Overflow属性

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

overflow-x只包括水平方向。

overflow-y只包括垂直方向。

可能的值:

visible 默认值。内容不会被修剪，会呈现在标签框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
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(默认属性)，其子元素为相对定位可让子元素不透明。

秒客网