详解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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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
咖啡的传说和历史
2021/03/03 新手入门
php框架Phpbean说明
2008/01/10 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
如何通过python画loss曲线的方法
2019/06/26 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
公司经营目标责任书
2015/01/29 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python