目 录CONTENT

文章目录

CSS常见样式二

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 6894 阅读 / 6297 字

CSS常见样式二

元素的隐藏与显示

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

第一种display方式

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

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

第二种visibility方式

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

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

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

区别一

首先看display:none的隐藏

display:block显示前display:none隐藏后
image-20200527162557202image-20200527162908707

看来看一看visibility:hidden的隐藏

visibility:visible显示前visibility:hidden隐藏后
image-20200527162743852image-20200527162849330

通过上面的对比我们发现,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属性来设置,有以下几个属性值

  1. pointer光标变成手指的形状
  2. help光标右下角会带一个问号
  3. wait光标变成一个等待的符号(转圈圈)
  4. text光标变成一个文字的符号
  5. progress光标右上角转圈圈
  6. *-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;
}
image-20200605142327718

裁剪

主要使用的属性是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这个属性

  1. alpha设置颜色的alpha通道

    filter:alpha(opacity=50);		/*透明度为50%*/
    
  2. blur设置高斯模糊

    filter:blur(15px);
    
  3. hue-rotate以角度为单位

    filter:hue-rorate(45deg);
    
0

评论区