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及cursor的特性的文章就介绍到这了,更多相关CSS opacity cursor特性内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!