Css 斜线生成案例_Css 斜线/对角线整理seo优化

Css 斜线生成案例_Css 斜线/对角线整理

news/2024/9/20 3:00:49

一、Css 斜线，块斜线，对角线

块的宽度高度任意支持

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 1 */.block {height: 100px;border: 1px solid red;position: relative;overflow: hidden;}.block::before {content: '';position: absolute;width: 0;height: 0;left: 0px;top: 0;width: 100%;height: 100%;background: linear-gradient(to right top, #00f 50%, #fff 50%);}.block::after {content: '';position: absolute;width: 0;height: 0;left: -1px;top: 1px;width: 100%;height: 100%;background: linear-gradient(to right top, #fff 50%, transparent 50%);}</style>
</head><body><div class="block"></div></body></html>

二、Css 斜线对角线，正方形对角线推荐

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 2 */.block2 {height: 100px;width: 100px;position: relative;overflow: hidden;background: yellow;margin: 50px auto;}/* 2.1 */.block2::after {content: '';position: absolute;left: 50%;top: 50%;height: 150px;width: 1px;background: #888888;transform: translate(-50%, -50%) rotate(-45deg);}</style>
</head><body><div class="block2"></div></body></html>

三、css 对角线，渐变实现，粗细度不好控制，宽高不能太大

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 3 */.block3 {box-sizing: border-box;background: yellowgreen;width: 200px;text-align: center;margin: auto;padding: 100px 0px;position: relative;}.block3::after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(to right top, transparent 49%, #000, transparent 50%);}</style>
</head><body><div class="block3">张三丰的店</div>
</body></html>

Css 修改图标颜色_Css 修改图片颜色_Css控制图片颜色

CSS3 filter(滤镜) 属性使用整理

Css3 将网页变成黑白_Css3 网页黑白滤镜filter

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.ryyt.cn/news/57660.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈，一经查实，立即删除！

mac升级node到指定版本

node版本升级到稳定版18.16.1 (1)node -v(2)npm cache clean -f 在使用npm cache clear --force清除缓存的时候，报npm WARN using --force Recommended protections disabled的错误，有可能是镜相源过期的问题换为npm cache verify(3) sudo n stable // 把当前系统的 Node 更…

HashMap深入讲解

HashMap是Java中最常用的集合类框架，也是Java语言中非常典型的数据结构，而HashSet和HashMap者在Java里有着相同的实现，前者仅仅是对后者做了一层包装，也就是说HashSet里面有一个HashMap(适配器模式)。因此了解HashMap源码也就了解HashSet了介绍Key的存储方式是基于哈希表…

如何实现mysql高可用

1.机器资源耗尽 2.单点故障 3.认为操作 4.网络单点故障解决方案？ 1.搭建mysql主从集群（双主，一主多从，多主多从） 2. 可以用MyCat, ShardingJdbc实现A节点同步到B节点流程？1. 从库通过IO线程，连接到主库，并且向主库要对应的bin log文件 2. 主库通过dump线程获取binlog文…

基于基尼指数构建分类决策树[算法+示例]

0 前言本文主要讲述使用基尼指数构建二叉决策树的算法，并给出例题一步步解析，帮助读者理解。本文所使用的数据集：贷款.CSV。读者需要具备的知识：基尼指数计算。1 基于基尼指数的分类树构建算法选择最优特征进行分裂：对于决策树的每个节点，遍历数据集中的所有特征。对于…

Node.js版本管理工具之NVM

目录一、NVM介绍二、NVM的下载安装1、NVM下载2、卸载旧版Node.js3、安装三、NVM配置及使用1、设置nvm镜像源2、安装Node.js3、卸载Node.js4、使用或切换Node.js版本5、设置全局安装路径和缓存路径四、常用命令一、NVM介绍在工作中，不同的项目可能需要不同NodeJS版本，所以维护…

Javaweb-DQL-分组查询

select sex,avg(math) from stu group by sex;-- 1 select sex,avg(math) as 数学平均分,count() as 人数 from stu group by sex;-- 2 select sex,avg(math) as 数学平均分,count() as 人数 from stu where math>=70 group by sex;-- 3 select sex,avg(math) as 数学平均分…

[C++ Daily] 递归锁解决标准锁的典型应用

递归锁解决标准锁的典型应用先看源码:结果(在A种尝试锁住mutex_时失败,进程等待,死锁无法退出:将std::mutex 用 std::recursive_mutex替换:结果:解析: std::recursive_mutex允许同一个线程对同一个锁对象进行多次上锁,获得多层所有权.

AP3215 8-150V 外围简单宽输入电压降压BUCK 恒压恒流驱动器 POE、电动车、扭扭车、电瓶车、车充方案

产品描述 AP3215是一系列外围电路简洁的宽输入电压降压BUCK 恒压恒流驱动器，适用于8- 150V 输入电压范围的DC-DC 降压应用。 AP3215输出电压通过 FB 管脚设置，输出电流通过 CS 电阻设置，外围简洁，具备高效率，低功耗，低纹波 , 优异的线性调整率和负载调整率等优…

Css 斜线生成案例_Css 斜线/对角线整理

相关文章