CSS中的postion和opacity用法和应用是什么-群英

上一篇：CSS伪类函数is()和where()如何使用，有什么差异下一篇：CSS子盒子居中效果的实现有哪些方法

这篇文章主要介绍“CSS中的postion和opacity用法和应用是什么”，有一些人在CSS中的postion和opacity用法和应用是什么的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

postion

background-postion我们常用于元素的定位，而且可以接收好几个值：

1、接收一个值

这个值可以为百分比、数值或者关键字，另一个值一定是center

// 单个属性值
background-postion: 33px;
background-postion: center;
background-postion: left;
background-postion: bottom;
background-postion: right;
background-postion: top;
background-postion: 30%;
background-postion: right;
background-postion: right;
//依次等价于
background-postion: 33px center;
background-postion: center center;
background-postion: left center;
background-postion: bottom center;
background-postion: right center;
background-postion: top center;
background-postion: 30% center;
background-postion: right center;
background-postion: right center;

2、接收两个值

两个值都是数值或者百分比值时，第一个值表示水平方向，另一个值表示垂直方向，如果我们把两个值都是为background-position: 0% 0%，那么就等于这个写法background-position：left top;

当两个值都是关键字时，top和bottom表示垂直方向，left和right表示水平方向，所以我们写成background-position: top right和background-position: right top效果是一样的，但是我们不能写成background-position: right left和background-position: top bottom,如果这样写，是无效的。

当两个字一个是数值或百分比值另一个是关键字时，如果数值或百分比值是第一个值，则表示水平方向，第二个值表示垂直方向。如果数值或百分比值是第二个值，就表示垂直方向，那另一个值就表示水平方向，所以如果我们写成background-position: 44px left是无效的。

3、接收3个值或4个值

数值和百分比值表示的是偏移量，第一个值一定是关键字，用来表示从哪个方向开始偏移的，如果是3个值，则缺少的偏移量为0,所以我们写成background-position: 44px left top是无效的。

background-postion接收多个值在浏览器中已经兼容，我们可以用background-position来代替calc()函数，从而去实现左方向或右方向的定位。

cursor

cursor中我们很少用到抓取和缩放效果，cursor:zoom-out用于放大，cursor:zoom-in用于缩小，如果想要在桌面上查看放大或者缩小，加入对应的属性就行。

cursor: grabbing在电脑页面显示的是一个握住的手形，cursor: grab在电脑页面显示的是一个张开的手形，在项目中使用我们可以加入前缀，防止不显示的问题。

如果我们想要在IE中去使用，我们可以加入move属性值。

// 用move属性值来代替grab
.wrapper {
  cursor: move;
  cursor: grab;
}

opacity

opacity可以使元素透明或者半透明，属性值范围0-1之间，opcacity默认值是1，而且我们还可以利用opacity将伪元素进行显示或者隐藏。

opacity计算规则

当我们给父元素和子元素同时设置了半透明效果，因为opacity属性没有继承性，所以半透明效果会叠加在一起，比如我们给父元素和子元素都设置为opacity：0.4，则此时的透明度就是0.16，是两个opacity的乘积。

// 父元素的透明度
opacity-father {
    opacity: 0.4
}
// 子元素的透明度
opacity-son {
    opacity: 0.4
}

opacity的边界

因为opacity的范围是0-1，如果我们设置的值不在这个范围之内，那么系统会按边界值去显示。

.wrapper {
    // 透明值设置为-11，但是系统会解析成0
    opacity：-11;
    // 透明值设置为88， 系统会解析成1
    opacity：88
}

其中RGBA和HSLA都具有opacity这种边界值的特性。

border-radius

平时工作中，我们最常用到的就是像素和百分比去设置border-radius。

border-radius: 10px;
// 常用来设置圆形
border-radius: 50%;

border-radius是一种缩写形式，而它的全写是由四部分组成的：border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius四部分组成。

当只有1个值时，这个值的效果会作用四个角：border-radius: 5px

当有2个值时，第一个值作用于左上角和右下角，第二个值作用于右上角和左下角: border-radius：6px 10%

当有3个值时，第一个值作用于左上角，第二个值作用于右下角和左下角，第三个值作用于右下角: border-radius: 3px 5% 6px

当有4个值时，第一个值作用于左上角，第二个值作用于右上角，第三个值作用于右下角，第四个值作用于左下角: border-radius: 6px 7% 8px 4px

还有一些等价的缩写形式：

border-top-left-radius: 5px;
// 等价于
border-radius: 5px 5px;

border-radius常用的一些知识： border-radius的圆角以外的区域无法响应点击事件。不支持负值。当我们给父元素设置了border-radius，子元素是直角效果，我们可以设置overflow：hidden使子元素在视觉上看起来是一个圆角。当我们将border-radius应用于display:table或者display: inline-table上时，我们必须让表格元素的border-collapse属性值为separate，border-collapse的默认值是separate，如果border-collapse: collapse，不会显示圆角效果。

我们还可以利用border-radius设置一些不规则的圆角效果:

.wrapper {
    border-radius: 69% 29% 29% 69% / 59% 39% 59% 39%;
}

一般带圆弧的图形效果都可以使用border-radius来实现出来，我们可以绘制角标：

border-bottom-right-radius: 100%;

关于“CSS中的postion和opacity用法和应用是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

标签： css

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：CSS伪类函数is()和where()如何使用，有什么差异下一篇：CSS子盒子居中效果的实现有哪些方法