当前位置: 首页 > news >正文

css-边框原理教程

 1. CSS中边框原理

        他不是一条直线,根据盒子原理,当边框宽度大于元素的长和宽时,呈现一个梯形和三角形的形状,用如下的代码来实地理解一下边框画法实现的原理

注:学习网址:
CSS画几种图形的方法_css画图_老电影故事的博客-CSDN博客

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>css边框原理理解</title><style>.border {width: 100px;height: 100px;margin-top: 100px;margin-left: 100px;border-top: 50px solid red;border-right: 50px solid green;border-bottom: 50px solid blue;border-left: 50px solid yellow;}.border_1 {width: 50px;height: 50px;margin-top: 100px;margin-left: 100px;border-top: 50px solid red;border-right: 50px solid green;border-bottom: 50px solid blue;border-left: 50px solid yellow;}.border_2 {width: 0px;height: 0px;margin-top: 100px;margin-left: 100px;border-top: 50px solid red;border-right: 50px solid green;border-bottom: 50px solid blue;border-left: 50px solid yellow;}</style>
</head><body><table><tr><td><div class="border"></div></td><td><div class="border_1"></div></td><td><div class="border_2"></div></td></tr></table></body></html>

http://www.lryc.cn/news/172298.html

相关文章:

  • 【数据结构】时间、空间复杂度
  • Databend 开源周报第 111 期
  • iOS自动化测试方案(一):MacOS虚拟机保姆级安装Xcode教程
  • vue3 - Vue 项目处理GitHub Pages 部署后 _plugin-vue_export-helper.js 404
  • 一百八十一、Hive——海豚调度HiveSQL任务时当Hive的计算引擎是mr或spark时脚本的区别(踩坑,附截图)
  • Linux 隔离网段下端口转发
  • 【CDN和UDN】CDN和UDN技术特点以及使用场景
  • 【Linux】改变缓存路径、清理缓存
  • python+opencv寻找图片或视频中颜色进行追踪之HSV颜色处理
  • ubuntu 22.04 服务器网卡无IP地址
  • 基于SpringBoot的网上点餐系统
  • 浅谈xss
  • 悬崖边:企业如何应对网络安全漏洞趋势
  • MyBatis 动态 SQL、MyBatis 标签、MyBatis关联查询
  • 在Vue中使用Immutable.js
  • 基于Yolov8的工业端面小目标计数检测(1)
  • 1.什么是jwt?jwt的作用是什么?2.jwt的三个部分是什么?三者之间的关系如何?3.JWT运行的流程是什么
  • 十三、MySql的视图
  • MFC扩展库BCGControlBar Pro v33.6亮点 - 流程图、Ribbon Bar功能升级
  • 前端 JS 经典:文件流下载
  • SSL免费证书会报安全提示吗?
  • 为什么要选择Spring cloud Sentinel
  • 第八天:gec6818arm开发板和Ubuntu中安装并且编译移植mysql驱动连接QT执行程序
  • 使用JavaScript实现图片的自动轮播
  • React 如何拿时间戳计算得到开始和结束时间戳
  • leetcode114 二叉树展开为链表
  • Linux系统上使用SQLite
  • 实现一个超级简单的string类(基于c++)
  • uniapp存值和取值,获取登录凭证 code方法
  • 【SpringCloud微服务全家桶学习笔记-服务调用Ribbon/openFeign】