上一章 动画效果

其它常见样式类型

UX百科编辑部2024-01-08 发布
416人在学·0条笔记
收藏

4.5.1 色彩设置原理

前面我们使用的 color、background-color 等属性,都是用来指定色彩的属性。但是设置色彩本身,不仅仅只是 16 进制色或者已经给出的颜色命名,还包括可以使用 RGB 和 RGBA 色值。

  • RGB设置:color: rgb(255,255,0); 复制软件中rgb参数到小括号内即可
  • RGBA设置:color: rgba(255,255,0,0.5); 在rgb后面增加了一个透明度,0.0 是完全透明,1是不透明

4.5.2 边框其它属性

boder 除了我们看到的描边设置外,还可以用来控制元素圆角的大小,虽然字面理解起来它们关联不是太大,但是 CSS3 中提供了 boder-radius 属性定义元素的四个边角,除了它本身外还包含下级:

  • border-top-left-radius:左上角
  • border-top-right-radius:右上角
  • border-bottom-left-radius:左下角
  • border-bottom-right-radius:右下角

我们可以通过增加对应的像素数值,来实现圆角矩形的效果,尤其在按钮的实现中。例如:

除了圆角,同属于这个类型的属性中还有一个阴影的属性,那就是 box-shadow 属性。它的设置和 XD 以及 Sketch 的阴影设置是一样的,下方案例分别是阴影的 X轴距、Y轴距离、BLUR模糊值、色彩:

4.5.3 元素透明度设置

CSS 中提供了一个 Opacity 属性专门用来控制元素的透明度,透明度的值和 RGBA 的使用方法一致,并且,这个透明度会影响下级元素,相当于我们为 Sketch 中制作的编组设置了透明度。

4.5.4 盒子属性

在页面的展示中,经常要实现一个遮罩的效果,那么我们就会用到 overflow 盒子属性,这个属性主要用来对标签内的元素状态做应对,比如下面这些设置:

  • hidden:元素内容超出标签盒子大小,那么就被隐藏(裁切)
  • scroll:为这个标签盒子提供内部滚动条的机制
  • auto:如果内容超出标签盒子的大小,那么自动增加内部的滚动条

4.5.5 长宽的具体设置

之前的演示我们应该都知道了,元素尺寸中宽和高的具体设置属性是 width 和 heigh,但是这两个属性的设置除了使用数值外,同时还可以设置百分比,比如:

这样子,这个 div 的宽就是整个浏览器视图区域的 50% 宽,我们变更浏览器宽度的时候,它的宽也会一起变更。也就是说,百分比设置,是根据它的上层标签宽来决定的,50%的宽即上级标签实际尺寸宽度的一半。

除了百分比外,宽和高都提供了一个最小和最大值的设定,即 min-width、max-width、min-height、max-height,它可以限定标签的长宽在一个特定的范围中。

比如上方的设置中,就是基于浏览器视图50%的情况下,最大的尺寸只到 300px,就不会再超出了。min和max两个设置也是自适应中的重要环节。

416人在学·0条笔记
收藏
已学会
10人已学会
下一篇HTML样式的语法
写了那么多 HTML CSS 的学习,终于,要在这篇迎来具体的案例应用了。下面,就是本节课要演示的案例图,我们要通过 HTML 和 CSS 将它实现出来: 在完成设计稿以后,我们着手项目的前端界面布局,首先要先建立项目有关的文件夹,然后在这个文件夹根目录中创建 ”index.html“ 文档,再创建...
本章笔记
仅看自己
logo