前端——关于元素的装饰效果你知道多少

本文详细介绍了CSS中的一些重要样式属性,包括垂直对齐方式(如基线、顶对齐、中线和底对齐)、光标类型(如默认、手型、文本编辑和移动状态)、边框圆角的实现与效果、溢出内容的显示(如隐藏、滚动条和自动)以及元素隐藏(display:none和visibility:hidden的区别)。此外,还探讨了盒子阴影、过渡效果、元素透明度以及利用边框创建三角形的技巧,这些都是前端开发中不可或缺的知识点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

#博学谷IT学习技术支持#

目录

1.垂直对齐方式

2.光标类型

3.边框圆角

4.溢出部分显示效果

5.元素本身隐藏

6.盒子阴影

7.过度

8.(拓展)元素整体透明度

9.(拓展)三角形


1.垂直对齐方式

垂直对齐方式:

属性名属性值对齐方式
vertical-alignbaseline基线对齐
top顶对齐
middle中线对齐
bottom下对齐

这种垂直对齐方式常用于处理行内块与文字(行内块)之间的对齐方式,因为两个不同的行内块元素的大小不一定相同,所以在垂直方向上的对齐方式就会有不同,下面来看四种对齐方式的示例:

1.默认,基线对齐:

 2.顶对齐:

 3.中线对齐:

 4.下对齐:

 在这个示例中,默认的基线对齐方式和顶对齐方式效果一样,但是不同的案例遇到的情况可能不一样,但是这四种对齐方式的用法与上图一致。

2.光标类型

光标类型,就是我们看到的鼠标箭头,可以给不同的元素设置不同的类型,在鼠标经过对应盒子时,就会改变对应的光标类型为设置类型,属性如下表格:

属性名属性值光标类型
cursordefault默认,箭头
pointer手(可点击类型)
text工字型(编辑文字状态)
move十字光标(移动类型)

由于截图会导致箭头消失,无法演示,所以这里不在演示示例,有兴趣的可自行实验。

3.边框圆角

边框圆角:

属性名属性值
border-radius数字+px
百分比

下面我们直接来看示例,边框圆角效果:

 这种是数字+px的写法,可以只写一个,那么四个角都会应用到,也可以写多个(最多四个),下面我用图展示多个属性值代表的含义:

 这里写的左上左下是指一个盒子的四个角的位置,按顺序是左上,右上,右下,左下的顺序,依次对应属性值,如果没有写,则会应用到对角的属性值,即上图中的内容。

须注意的是:属性值最大可以是盒子宽高的一半,比如上图示例中,盒子宽高是200×200,那么最大就是100px,即使写的属性值超过100,也是当做100来使用,当属性值等于盒子宽高的一半时,盒子会成为一个圆形,如下:

 如果盒子不是正方形,那么加了最大数值的边框圆角后,盒子会成为斜着放置的椭圆,一般圆形用的比较多,所以这里了解即可。

下面来看另一种写法:

 这里的百分比是基于边长的百分比的,除了写法不一样,用法是一样的,这里就不在过多解释。

须注意的是:因为是基于 边长的百分比,所以最大百分比是50%。

4.溢出部分显示效果

属性名属性值显示效果
overflowvisible默认,溢出部分可见
hidden溢出部分隐藏
scroll是否溢出都显示滚动条
auto根据是否溢出自动显示滚动条

下面我们来看示例:

默认,溢出可见,所以这里没有设置该属性,但是效果一致 

溢出部分隐藏:

 是否溢出都显示滚动条:

 可见,不管盒子内容是否溢出,右边和下边均有滚动条

根据是否溢出自动显示滚动条:

 第二个盒子内容未溢出,所以没有滚动条

5.元素本身隐藏

之间我们说过display属性的一些内容,是用来改变盒子类型的,今天在学一种,叫做自身隐藏:

display:none;

来看具体示例:

 正常情况下,两个div盒子应该上下排列,且颜色不同,但是现在只能看到一个盒子,那就证明第一个盒子确实被隐藏了,而且第一个盒子的位置被第二个盒子占用着,也说明了第一个盒子属于不占位置隐藏,自身隐藏之后,自己的位置就被空出来了,其他盒子会补位。

上面说了不占位隐藏,那必然就有占位隐藏:visibility:hidden;

来看示例:

 可以看到这个和上一个图的不同,这里的box1虽然也隐藏了,但是还会占位置,导致box2不能上去补位。

6.盒子阴影

属性名属性值描述
box-shadowh-shadow必须设置,水平偏移值
v-shadow必须设置,垂直偏移值
blur可选,模糊度
spread可选,阴影扩大
color可选,阴影颜色
inset可选,改为内部阴影

这里不在演示,了解即可,一般不常用

7.过度

过渡属性,transition:all或者对应属性名,由于过渡属性要配合某种属性或者所有属性的前后变化使用(可以想象成之前讲过的伪元素:hover,鼠标移入,改变一些属性或属性值,配合过渡),属于一种动画效果,所以这里就不在演示,只说用法:

一般常用的是:transition:all;这表示所有有变化的属性都会过渡,比如说一个盒子长度是100px,鼠标经过长度变为200px,如果不加过渡,那么前后变化将会是瞬间完成,加了过渡属性,transition:all;该过程就会有动画效果,一点点边长,有时候并不是所有属性或属性值都要过渡变化,比如盒子长宽都有变化,但是只需要宽度过渡,长度需要瞬间完成,就可以设置,transition:width;只给宽度加过渡属性,如果想要将这个过渡时间正常,也可以给过渡添加时间,表示该过程需要多久完成,比如,transition:all 5s;或者,transition:width  5s;切记一定要加单位,秒(s)

8.(拓展)元素整体透明度

元素透明度,opacity:数字(0-1),来看两个简单示例:

 透明度属性值为0-1之间的数,从上图中也不难发现,数值越大,透明度越低,属性越小,透明度越高,如果把透明度设置为0,就成了全透明,和刚刚讲的占位隐藏效果一致。设置成1,相当于没设置。

9.(拓展)三角形

三角形想必大家都不陌生,那如何在页面上渲染出一个三角形,基本思路:利用盒子边框和透明色属性。

基本思路:

1.设置一个盒子

2.四周设置的边框线(可加颜色),根据想要的三角形大小自行设定

3.盒子的宽高设置为0,仅保留边框

4.留下一个或相邻两个方向的边框,其他方向的边框颜色设置为透明色

下面我们根据步骤,来看示例:

 第四步需要注意的是,除了颜色设置成透明色以外,其他都应与上边第二步设置的边框保持一致,这里我是留下了相邻两个方向的边框,当然也可以留下一个方向的边框。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值