详解CSS中postion和opacity及cursor的特性_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

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特性内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • css之display、visibility、opacity、rgba和z-index: -1的区别
  • 详解css-opacity子元素继承父元素透明度的解决方法
  • 详解css透明度之rgba和opacity的区别及兼容
  • css 图像透明度opacity兼容性介绍
  • 举例详解css中的cursor属性
  • CSS样式的postion属性absolute和fixed的区别
  • CSS教程:clip属性完全解答
  • CSS的简单问题,大神进来看下,关于postion属性的
  • CSS中DIV里方框填充颜色,里面的字为什么不会跟着下来
  • html/css如何截取一块中间一块图片并作为背景无限重复bac...
  • html/css如何截取一块中间一块图片并作为背景无限重复bac...
  • 为什么这段css在火狐,chrome浏览器下面不能居中。。ie6可以...
  • css中clip 怎么用
  • 在CSS 中,用 float 和 position 的区别是什么
  • CSS布局浮动(float)和定位(position)属性的区别和如何使用
  • CSS清除定位position
  • 在CSS 中,用 float 和 position 的区别是什么
  • 手机端css中怎么让底部导航栏不被输入菜单顶上去·
  • 为什么css中设置z
  • css中clip 怎么用
  • css中 li设置了图片最大宽度后,如何让span叠加在li里面的图片底...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程cssopacitycursor特性详解css透明度之rgba和opacity的区别及兼容css 图像透明度opacity兼容性介绍举例详解css中的cursor属性css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css自定义select下拉选择框的样式(不用其他标签模拟)css 漂亮搜索框美化代码css 中的background:transparent到底是什么意思有什么css圆角效果 -webkit-border-radius(css3中border-radcss 首行缩进两个文字详解css中postion和opacity及cursor的特性css使用flex和grid布局实现3d骰子css中:last-child不生效的解决方法css浮动引起的高度塌陷问题使用css实现六边形的图片效果el-form每行显示两列底部按钮居中效果的实现纯css打字动画的实现示例新的css 伪类函数 :is() 和 :where()示例详解详解flex:1什么意思css子盒子水平和垂直居中的五种方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved