回到所有的课程
课程库

网络上的先进边界

使用边框定义元素的半径,并在元素边界的一侧或多一侧创建轮廓。

本视频采用了旧的用户界面。更新版本即将到来!

边框定义元素的半径,并在元素边界的一侧或多一侧创建轮廓。您可以在样式面板中定义任何选定元素的边界和半径。

在这节课中:

  1. 半径
  2. 风格
  3. 宽度
  4. 颜色
  5. 形状
  6. 边和边缘
  7. 、商场
  8. 动画过渡

边框允许您在元素边界的一个或多个边创建轮廓。边框会占用空间,从而扩展元素的维度。对于具有定义的大小,边界将推动内部内容。

若要在不扩展元素尺寸的情况下添加边框效果,请添加内框或外框阴影,模糊值为0。

半径

定义元素的所有角或单个角的半径,以创建圆角。

默认情况下,半径以像素(px)为单位设置。要使用百分比,在任何边界输入字段中输入百分比值和字符(%)。你也可以使用单位下拉菜单中的任何CSS单位。

了解更多关于输入值和单位

风格

style属性决定元素周围边框的类型。边框可以是实线、虚线或虚线。您甚至可以通过将样式设置为none来隐藏边框设置。

一些内置元素带有默认边框,比如表单输入字段和块引号。可以通过将边框样式设置为无来删除默认边框。

宽度

宽度决定边框的厚度。这个值可以包含单位下拉列表中可用的任何CSS单位。

了解更多关于输入值和单位

颜色

风格的面板>颜色,您可以在边框设置中为任何元素的边框指定颜色和不透明度。如果改变边框一侧的颜色,就会得到斜面或相框效果。

形状

默认情况下,设置一个元素的半径会将该值应用到所有角落。您可以通过拖动滑块或在输入字段中输入一个值来设置一个值。

使用像素值来获得圆角,使用百分比来获得具有相同长宽比的椭圆角。

胶囊的形状

对于胶囊形状,将半径设置为大于元素最短维度的一半的像素值。如果你想略过计算,通常可以使用更大的数字,如500。

椭圆

对于椭圆,设置半径为50%。百分比基于元素的宽度和高度

注意:当有不同维度的元素时,椭圆可能会显示不一致。

对于圆形,设置半径为50%,并确保元素的宽度和高度相同。

独特的形状

您可以在每个角上设置不同的值,以创建独特的形状。

矩形,圆

要使一个矩形图像圆形而不扭曲它,你可以使用半径和对象适合放置在Div块内的图像-这里是如何:

  1. 拖一个Div块到画布上
  2. 将图像拖动到Div块
  3. 选择Div块
  4. 点击进入风格的面板>选择器并创建一个(例如,图像保存器)
  5. 设置一个平等高度而且宽度(例如,400 px)
  6. 设置半径调整为50%(使其为圆形,因为宽度和高度相等)
  7. 溢出隐藏(隐藏图像中圆圈外的任何部分)
  8. 选择画布上的图像
  9. 设置图像宽度而且高度到100%
  10. 适合覆盖(覆盖圆形div块内部的空间)
  11. 单击进入旁边的椭圆适合定位圆形盖子(将其固定在角落或中心)

边和边缘

风格的面板>边界,您可以一次设置所有的边(通过单击中间)或单独的边。

如果在顶部创建边框并设置样式,则只影响顶部。如果在左侧创建边框并设置样式,则只影响左侧。

、商场

斜面为图像增加深度。


若要向按钮添加斜面效果,请打开风格的面板>边界

  1. 为按钮的所有边添加边框(例如,给每个边设置10px的宽度)
  2. 添加一个边框颜色(不同于按钮的颜色)到所有的边
  3. 在样式面板中单击边框的一侧
  4. 点击颜色,添加颜色(与原始边框颜色不同)
  5. 改变一侧的宽度

动画过渡

您可以对样式面板中的任何东西进行样式设置-让我们对一个按钮进行样式设置,使其悬停时产生动画效果。


让你的按钮在悬停时变成圆角:

  1. 选择画布上的按钮
  2. 点击进入风格的面板>选择器并选择徘徊从下拉
  3. 向下滚动到边界并添加一个半径(例如,10 px)
将选择器更改为hover

要使按钮返回原来的关闭状态,悬停并创建一个平滑过渡:

  1. 选择画布上的按钮
  2. 点击进入风格的面板>选择器并选择没有一个从下拉
  3. 向下滚动到影响>转换>类型>财产>边界半径
将选择器更改为无
在Border-Radius上添加一个过渡

要删除这个动画:

  1. 选择画布上的按钮
  2. 点击进入风格的面板>选择器并选择徘徊从下拉
  3. 向下滚动到边界>半径>重置

让你的按钮在点击时变成圆角:

  1. 选择画布上的按钮
  2. 点击进入风格的面板>选择器并选择按下从下拉
  3. 向下滚动到边界并添加一个半径(例如,10 px)

你可以使用相同的步骤添加一个过渡和动画的东西,如边框颜色或边框宽度悬停或单击。玩得开心!

一定要看看我们的完整的课程动画与After Effects和珞蒂

尝试Webflow——它是免费的
Baidu
map