详解CSS中postion和opacity及cursor的特性


Posted in HTML / CSS onAugust 14, 2022

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

 
HTML / CSS 相关文章推荐
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
html网页引入svg图片的4种方式
HTML静态页面获取url参数和UserAgent的实现
Aug 05 #HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 #HTML / CSS
css中:last-child不生效的解决方法
Aug 05 #HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 #HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 #HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 #HTML / CSS
You might like
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python及PyCharm下载与安装教程
2017/11/18 Python
windows下python安装pip图文教程
2018/05/25 Python
详解python 注释、变量、类型
2018/08/10 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Python requests模块cookie实例解析
2020/04/14 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
魅力教师事迹材料
2014/01/10 职场文书
校园安全广播稿
2014/02/08 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
Python实现归一化算法详情
2022/03/18 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript