千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:长沙千锋IT培训  >  技术干货  >  CSS边框综合案例

CSS边框综合案例

来源:千锋教育
发布人:qyf
时间: 2023-02-06 17:50:12

  这节课,我们利用CSS边框知识完成一些案例。

  CSS 边框在网站开发中经常被用到。比如,像这些搜索框、分隔栏、按钮边框等等,就连这个小三角都是用边框制作出来的。

图片 1

  http://www.qfedu.com/

图片 2

图片 3

  接下来,我们就使用 CSS 边框,来制作正方形、三角形、梯形、风车等效果。

图片 4

图片 5

图片 6

图片 7

  创建 010-css-case-2 文件夹,在文件夹下创建 case-border.html 文件和 case-2.css 文件。打开 html 文件,构建基础代码,引入外部样式。

  添加一个 div 元素,定义 id 属性等于 square。

  <div id="square"></div>

  打开 css 文件,定义 #square 选择器,声明样式:width: 150px,height: 150px,border-top: 50px solid red,border-right: 50px solid yellow,border-bottom: 50px solid blue,border-left: 50px solid green。

  在浏览器中查看效果,我们发现,每条边的交接处,边框各占一半。

  打开浏览器开发者工具,在 Elements 页签下,鼠标滑到 div 元素上,我们发现,这个元素的显示的宽高为 250。在CSS中,给 div 设置的宽度是150,加上两个边框的宽度恰好是 250。

  因此可以得出结论:样式中给元素设置的宽高,是不包含该元素边框宽高的,它只包含元素内容的宽高。

  如果这个 div 在边框宽度不变的情况下,收缩内容区域,直到内容全部消失,就是我们要的效果了。

  要实现这个效果,只要把 div 里样式的 width 和 height 属性值设置为 0 就可以了。

  我们看,效果实现了!

  有这个作为基础,实现三角形也容易了。再添加一个 div 元素,定义 id 属性等于 triangle。

  再声明一个 #triangle 选择器,把正方形的样式代码拷贝过来,保留上边框样式不变,把其他边的颜色设置为 transparent。

  这样,三角形就做好了。

  当然,这三行代码可以简化为 border: 50px solid transparent。

  诶,三角形怎么消失了?原来,后面的这句样式将全部边框设置为透明,把上面那句样式给覆盖了。我们只需要把他们顺序颠倒一下即可。此时,对于顶部的边框,又重新定义了样式,把上边定义的顶部边框样式又覆盖回来了。

  三角形又出现了!

  这个梯形该如何实现呢?其实也不难。再添加一个 div 元素,定义 id 属性等于 trapezium。

  再声明一个 #trapezium 选择器,再次把正方形的样式代码拷贝过来,把顶边样式注释掉,左边框颜色设置为透明,右边框颜色设置为蓝色。

  大功告成,梯形就做好了!

  再提高点难度,制作一个风车效果。分析一下,这个风车实际上是由四个三角形拼合而成的。

  再创建一个div,定义属性 id 等于 windmills。在这个 div 里编写 emmet 命令:div 中括号 class 等于 box$ 乘以 4 (div[class=box$]*4) ,回车,四个 div 创建好了。

  定义选择器 #windmills,给外部的 div 声明样式:width: 200px,height: 200px,border: 2px solid gray。

  定义 #windmills .box1 选择器,声明样式:width: 0,height: 0,border: 50px solid transparent,border-bottom: 50px solid red。

  将这组样式拷贝三份,修改选择器为 box2,box3,box4。我们给四个风车叶编一下号。

  第一个是底部的三角,显示的边框应该是 border-bottom。以此类推,第二个是左侧的三角,第三个是右侧的三角,第四个是上边的三角。

  很显然,现在还不是风车的效果。仔细观察,四个 div 各独占一行,得需要让他们横向排列才行。

  定义一个新的选择器 #windmills div,给四个 div 声明样式:float: left。

  很神奇,风车的效果完成了!

  有关浮动的强大功能,我们在后续的课程里还会详细介绍。这里先把它的功能理解成,可以使容器左右排列即可。

  回到样式,我们发现这三句样式重复写了四遍,完全可以把他们放到 #windmills div 这个选择器里。

  代码参考:

  #square {

  width: 0px;

  height: 0px;

  border-top: 50px solid red;

  border-right: 50px solid yellow;

  border-bottom: 50px solid blue;

  border-left: 50px solid green;

  }

  #triangle {

  width: 0px;

  height: 0px;

  border: 50px solid transparent;

  border-top: 50px solid red;

  /* border-right: 50px solid transparent;

  border-bottom: 50px solid transparent;

  border-left: 50px solid transparent; */

  }

  #trapezium {

  width: 0px;

  height: 0px;

  /* border-top: 50px solid red; */

  border-right: 50px solid blue;

  border-bottom: 50px solid blue;

  border-left: 50px solid transparent;

  }

  #windmills {

  width: 200px;

  height: 200px;

  border: 2px solid gray;

  }

  #windmills div {

  float: left;

  width: 0;

  height: 0;

  border: 50px solid transparent;

  }

  #windmills .box1 {

  border-bottom: 50px solid red;

  }

  #windmills .box2 {

  border-left: 50px solid red;

  }

  #windmills .box3 {

  border-right: 50px solid red;

  }

  #windmills .box4 {

  border-top: 50px solid red;

  }

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

bootstrap是什么?有什么用处

2023-04-20

自旋锁原理是什么?自旋锁有什么优缺点

2023-03-17

Kafka的leader选举机制是什么

2023-03-03

最新文章NEW

多种java日志框架你真的了解吗

2023-03-17

如何查看git用户名和密码

2023-03-03

2分钟了解BFC

2023-02-06

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>