CSS常见样式二-杨标的博客

CSS常见样式二

元素的隐藏与显示

在CSS里面，隐藏与显示页面上面的元素有两种方式，第一种是通过display的属性来设置，第二种是通过visibility的方式来设置

第一种 ：display方式

这一种隐藏方式是让当前元素不展示

如果要隐藏，直接在当前元素上面设置display:none
如果要显示，直接在当前的元素上面设置display为原来的类型就行了，如block/inline/inline-block

第二种：visibility方式

这一种隐藏方式是让当前元素不可见

如果要隐藏，直接在当前元素上面设置visibility:hidden
如果要显示，直接在当前的元素上面设置visibility:visible

这两种元素的隐藏方式有明显的区别，不能胡乱使用，我们现在就来讲一讲它们的区别

区别一：

首先看display:none的隐藏

display:block显示前	display:none隐藏后

看来看一看visibility:hidden的隐藏

visibility:visible显示前	visibility:hidden隐藏后

通过上面的对比我们发现，display:none隐藏以后不占用原来的位置，而visibility:hidden隐藏以后是占用原来的位置的（相当于变透明了）

区别二：

<style type="text/css">
    .div1{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        background-color: deeppink;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
    }
</style>
<div class="div1">
    第一个盒子
    <div class="div2">
        第二个盒子
    </div>
</div>

在上面的代码面，如果我们div1通过display:none隐藏以后，里面的子元素是无论如何也不可能再显示出来的

但是如果我们在div1上面通过visibility:hidden隐藏以后，在里面的子元素div2上面设置visibility:visible，这个时候子元素又显示出来了

所以这一种现象在官方法的说明里面是这么说的，display:none具备一个株连性，而visibility:hidden则不具备这种特性

光标效果

光标效果指的是鼠标移动到某个元素上面去的时候，它的显示效果，它通过cursor属性来设置，有以下几个属性值

pointer光标变成手指的形状
help光标右下角会带一个问号
wait光标变成一个等待的符号（转圈圈）
text光标变成一个文字的符号
progress光标右上角转圈圈
*-resize光标变成大小调整的符号，星号则代表上下左右的四个方法，（上北下南，左西右东）

透明度

之前我们讲颜色值的时候讲过颜色rgba透明度，但这只是颜色的透明度，如果想让元素也实现透明，则需要使用下面的方法

使用opacity属性来设置。它的值在0~1之间，1代表全显示，0代表全透明
```
opacity:0.5;
```
这一个属性有兼容性，使用高于IE8的浏览器
在低版本的IE里面，它需要这么设置
```
filter:alpha(opacity=50);
```

因为有兼容性，所以在设置元素的透明的时候，我们上面的两个属性要同时设置

img{
    opacity:0.5;
    filter:alpha(opacity=50);
}

盒子阴影

之前我们学过文字的阴影，现在我们了解一下盒子的阴影状态，盒子的阴影使用属性box-shadow它接收6个属性值。它的语法格式如下

box-shadow:X轴偏移 Y轴偏移 阴影模糊度 阴影扩散度 阴影颜色 内阴影/外阴影

根据上面的语法格式，我们可以得得下面的CSS代码

box-shadow: 10px 20px 15px 11px blue outset;		/*外扩散的阴影*/
/*同理，我们可以将阴影的扩散度转为内阴影*/
box-shadow: 10px 20px 15px 11px blue inset;		/*内扩散的阴影*/

盒子阴影比文字的阴影多了一个功能就是支持多个阴影设置

.div1 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 200px;
    box-shadow:
        120px 120px 0px blue,
        -120px -120px 0px lightseagreen,
        120px -120px 0px deeppink,
        -120px 120px 0px lightgreen;
}

裁剪

主要使用的属性是clip-path它的裁剪方式主要有也下几种

1.矩形裁剪

矩形裁剪主要使用的是就是inset这个方法，它在这里的语法格式如下
clip-path:inset(上边 右边 下边 左边 round 圆角);
/*如下*/
clip-path: inset(10px 20px 40px 5px round 20px);
通过像上面的这种方式，我们也可以实现矩形，圆心，正方形的裁剪效果

2.圆形裁剪

圆形裁剪主要使用的是circle这个方法，它的语法格式如下
clip-path:circle(半径 at 圆心横坐标 圆心纵坐标);
/*如下*/
clip-path: circle(50px at 100px 150px);

3.椭圆裁剪

圆形裁剪主要使用的是ellipse这个方法，它的语法格式如下
clip-path:ellipse(横轴半径 纵轴半径 at 圆心横坐标 圆心纵坐标);
/*如下*/
clip-path: ellipse(150px 100px at 200px 150px);
当它的横轴半径与纵轴半径相同的时候，就可以得到一个圆了

4.多边形裁剪

多边形裁剪主要使用的是polygon这个方法，它的语法格式如下
clip-path:polygon(x1 y1,x2 y2,x3 y3,x4 y4.........);
/*如下*/
clip-path: polygon(200px 0px,400px 400px,0px 400px);
clip-path: polygon(100px 0px,300px 0px, 400px 400px,0px 400px);
多边形裁剪可以得到我们的任意图像

注意事项：一个元素一旦使用了裁剪的属性以后，盒子的外阴影效果就看不到了

滤镜

滤镜主要使用的属性就是filter这个属性

alpha设置颜色的alpha通道

filter:alpha(opacity=50);		/*透明度为50%*/

blur设置高斯模糊
```
filter:blur(15px);
```
hue-rotate以角度为单位
```
filter:hue-rorate(45deg);
```

目录CONTENT

CSS常见样式二