您现在的位置是：首页 > 技术教程 正文

web前端之行为验证码、不同设备和屏幕尺寸呈现不同大小、元素宽度根据视口宽度进行调整、元素或图片裁剪、图片验证码

admin 阅读： 2024-03-30
后台-插件-广告管理-内容页头部广告（手机）

MENU

  • 前言
  • 版本一(html+JS+css)
  • 版本二(html+JS+css+canvas)

前言

1、版本一的样式比较齐全；
2、版本二的JS逻辑和功能效果比较完善，且是别人的代码，后续会对样式进行完善。[Gitee | 哔哩哔哩]；
3、两个版本各有千秋，主要学习里面的一些技巧，这里主要介绍版本一的样式技巧；
4、行为验证码一般是后端实现，而且大概率是使用第三方插件，因为涉及到的逻辑和内容比较多，前后端实现起来都比较麻烦。

版本一(html+JS+css)

案例公共样式

body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

案例一(clip-path裁剪的应用)

<style> .clip_path { width: 300px; height: 300px; background-color: #ff0000; } .clip_path:first-child { float: left; background-color: #0000ff; clip-path: inset(50px 20px 30px 40px round 10px); } style> <div> <div class="clip_path">div> <div class="clip_path">div> div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

案例一解析

代码块中包含两个元素，每个元素都有类名为clip_path。此外，还有一些CSS样式被应用于这些元素。

CSS样式部分
1、clip_path类指定了一个固定的宽度(300像素)、高度(300像素)和背景颜色(红色)的区域。
2、clip_path:first-child选择器用于选择第一个具有类名clip_path的元素，并对其应用特定样式。
2.1、float: left;将第一个元素左浮动，使其在其右侧的元素之前显示。
2.2、background-color: #0000ff;将第一个元素的背景颜色更改为蓝色。
2.3、clip-path: inset(50px 20px 30px 40px round 10px);将剪切路径应用于第一个元素，剪切路径的形状是一个矩形，内边距为50px 20px 30px 40px，并且角是圆形的，半径为10px。

HTML部分
两个元素被包含在一个外部中。
每个元素都有类名为clip_path，因此它们都受到了相同的CSS样式的影响。

综上所述，代码将显示两个相同大小的红色方块，但第一个方块的背景颜色为蓝色，并具有一种剪切路径，使其内部形成一个圆角矩形区域。

案例一效果图

case11

案例二(clamp最大值最小值的应用)

<style> .clamp { width: clamp(300px, 50vw, 600px); height: 300px; background-color: #ff0000; } style> <div class="clamp">div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

案例二解析

一段简单的HTML和CSS代码段，用于创建一个具有限制宽度的元素。

1、