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

1.垂直对齐方式

2.光标类型

3.边框圆角

4.溢出部分显示效果

5.元素本身隐藏

6.盒子阴影

7.过度

8.（拓展）元素整体透明度

9.（拓展）三角形

1.垂直对齐方式

垂直对齐方式：

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

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

1.默认，基线对齐：

2.顶对齐：

3.中线对齐：

4.下对齐：

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

2.光标类型

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

属性名	属性值	光标类型
cursor	default	默认，箭头
	pointer	手（可点击类型）
	text	工字型（编辑文字状态）
	move	十字光标（移动类型）

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

3.边框圆角

边框圆角：

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

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

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

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

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

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

下面来看另一种写法：

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

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

4.溢出部分显示效果

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

下面我们来看示例：

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

溢出部分隐藏：

是否溢出都显示滚动条：

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

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

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

5.元素本身隐藏

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

display：none；

来看具体示例：

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

上面说了不占位隐藏，那必然就有占位隐藏：visibility：hidden；

来看示例：

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

6.盒子阴影

属性名	属性值	描述
box-shadow	h-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.留下一个或相邻两个方向的边框，其他方向的边框颜色设置为透明色

下面我们根据步骤，来看示例：

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

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

** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 ** 小程序.前端交流群:609690978 先上效果图代码: <div id="classifyScroll" :class= ...
javascript中display方法或者visibility隐藏元素实现的效果
在前端开发html页面的时候,可以使用js中实现,修改元素的属性,达到隐藏元素,以及隐藏后的元素的显示的效果:需要修改元素的display方法或者visibility,两种方案实现的效果不同,可参考下 ...
采样次数不同平均值不一样_不同的真石漆装饰效果也是不一样的
外墙真石漆真的是一件很好的产品,具有防火性.防水性.安全且环保.粘力强.永不褪色等特点,无疑是人们较好的选择,在很早之前就已经逐渐的取代了瓷砖和其他石材在人们心中的位置.真石漆的品种不止一种,按照装饰 ...
unity game和scene效果不一样_不同的真石漆装饰效果也是不一样的
外墙真石漆真的是一件很好的产品,具有防火性.防水性.安全且环保.粘力强.永不褪色等特点,无疑是人们较好的选择,在很早之前就已经逐渐的取代了瓷砖和其他石材在人们心中的位置.真石漆的品种不止一种,按照装饰 ...
实现元素拖拽放大缩小_Vue实战067：DOM元素拖拽效果的实现
DOM元素拖拽效果: 当鼠标选中目标元素之后可以将其拖放至指定区域的任意位置,实现的思路主要是通过鼠标事件按下.移动.抬起,摁下鼠标时记录鼠标位置以及元素位置并算出鼠标相对元素的位置,在拖拽时记下当前 ...
Web前端学习6个有效果软件，你值得拥有!
想要让程序猿可以快速有效的工作,辅助工具是非常有必要的,不管是刚学习web前端技术的同学还是已经进入工作的学员,都需要学习和掌握一些Web前端开发工具和软件,Web前端学习6个有效果软件,你值得拥有! ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
第9章第7节：给目录页幻灯片中的元素添加动画效果 [PowerPoint精美幻灯片实战教程]
在完成目录页的制作之后,现在来给幻灯片中的元素添加动画效果.首先选择需要添加动画效果的对象. 点击动画选项卡,显示动画功能面板. 然后给所选对象添加名为淡化的动画效果. 将动画的开始方式设置为上一动画 ...
web前端十种图片的hover效果（粗糙）
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...

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

1.垂直对齐方式

2.光标类型

3.边框圆角

4.溢出部分显示效果

5.元素本身隐藏

6.盒子阴影

7.过度

8.（拓展）元素整体透明度

9.（拓展）三角形

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

最新文章

热门文章