css内阴影

news2025/3/6 21:24:37

CSS内阴影及特定方向内阴影

基本参数:

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

内阴影

box-shadow: inset 0 0 10px 10px red;

在这里插入图片描述

左边内阴影

 box-shadow: inset 20px 0 10px -10px red;

在这里插入图片描述
右边内阴影

box-shadow: inset -20px 0 10px -10px red;

在这里插入图片描述
顶部内阴影

box-shadow: inset 0 20px 10px -10px red;

在这里插入图片描述
底部内阴影

box-shadow: inset 0 -20px 10px -10px red;

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python GUI编程利器:初始Tkinker(1)

小朋友们好,大朋友们好! 我是猫妹,一名爱上Python编程的小学生。 和猫妹学Python,一起趣味学编程。 神兽归笼 最近天气炎热起来了,大家一定要注意防暑降温啊! 马上要放暑假了,你有什么计划没…

AI届老牌顶流!AI孙燕姿?AI配音?带你玩转语音合成!

热度与争议并存!AI孙燕姿成新晋顶流?随着AI孙燕姿的爆火,AI老牌顶流「语音合成」再度被炒热飞桨AI Studio也汇聚着众多“语音合成”深度玩家本期就来带大家快速上手 AI克隆歌手 该应用项目使用AI孙燕姿同源模型So-VITS-SVC 4.0,其…

Pyside6-QtCharts+psutil实战-绘制一个CPU监测工具

今天是实战篇章,我们结合可以快速提升我们开发效率的工具一起开实战一波实时读取系统CPU使用情况的折线图。 使用的开发工具Qt Designer来开发UI界面。 十分便捷。使用起来也算比较的简单了,虽然也存在不少的BUG。 ❝ 对所需要的控件进行拖拽式&#xff…

如何看待低级爬虫与高级爬虫?

爬虫之所以分为高级和低级,主要是基于其功能、复杂性和灵活性的差异。根据我总结大概有下面几点原因: 功能和复杂性:高级爬虫通常提供更多功能和扩展性,包括处理复杂页面结构、模拟用户操作、解析和清洗数据等。它们解决了开发者…

死神来了 | 印度火车,能靠点谱吗?

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 阿福 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦Midjourney 产品统筹 / bobo 场地支持 / 声湃轩天津录音间 6月初,印度三列火车先后相撞,造成288人死亡、1175人受伤,被称为印度本世…

基于Echarts2.X的地图数据可视化指南

目录 前言 一、关于Echarts版本 1、为什么用Echarts2.2.7 2、文件目录说明 二、地图数据可视化 1、新建map.html 2、Echarts图表初始化 3、参数设置 三、源码展示分析 1、初始化阶段 2、timelineOption.js模拟数据 总结 前言 在前面的博文(数据会说话-从我国…

ebpf执行报错no BTF found for kernel

一、现象描述 采用cilium epbf框架开发的ebpf程序无法在系统上正常运行。 curtiscurtis-desktop:~$ cd work/ curtiscurtis-desktop:~/work$ ls kmodule vfs_write_moitor curtiscurtis-desktop:~/work$ curtiscurtis-desktop:~/work$ sudo ./vfs_write_moitor -filename/mn…

第九十天学习记录:C++核心:函数提高

函数默认参数 在C中,函数的形参列表中的形参是可以有默认值的。 语法:返回值类型 函数名 (参数默认值){} 问:C语言可以在函数的形参赋默认值吗? 答: 在C语言中&#xf…

Unity 之 抖音小游戏本地数据最新存储方法分享

Unity 之 抖音小游戏本地数据最新存储方法分享 一、抖音小游戏文件存储系统背景二、文件存储系统的使用方法2.1 初始化2.1 创建目录2.3 存储数据2.4 删除目录/文件2.5 其他相关操作 三,小结 抖音小游戏是一种基于抖音平台开发的小型游戏,与传统的 APP 不…

Java POI (2)—— Excel文件的上传与导出(实例演示)

一、单文件的上传功能 这里是一个demo的流程图,下面按照这个流程图做了一个简单的实现,有部分判断没有加上,实际操作中,可以根据自己的需求进行增加或者修改。并且此处还是在接受文件传入后将文件进行了下载,保存到本地…

哪个爬虫库用的最多?

在Python中,最常用的爬虫库是requests和BeautifulSoup。requests库用于发送HTTP请求和处理响应,而BeautifulSoup库用于解析HTML文档。这两个库通常结合使用,用于爬取网页内容并提取所需的数据。其他常用的爬虫库还包括Scrapy、Selenium等。 常…

我的创作纪念日(256)

目录 机缘 收获 日常 成就 憧憬 机缘 要说为什么我会选择IT这条路,我觉得是因为从小对电脑的兴趣,从小学2年级开始的电脑生涯,但是那时候也只是玩电脑游戏,而由于我接触电脑较早的缘故,开始有许多的朋友遇到问题…

vue+heatmapjs-vue实现热力图,点击/滑动可以监听并更新

实现效果如下: 点击的次数或者滑动越多,区域的颜色越深 1.下载最新版热力图插件 npm install heatmapjs-vue 2.main.js中全局引用 注意!!!只能全局引用,不能局部引用,局部引用就报错显示不出…

「2024」预备研究生mem-形式逻辑强化:入选名额

一、入选名额 从后往前推 二、课后题

第3章-数组

1. 数组的概述 数组(Array), 是多个相同类型数据按一定顺序排列 的集合, 并使用一个名字命名, 并通过编号的方式 对这些数据进行统一管理数组的常见概念 数组名下标(或索引)元素数组的长度 数组本身是引用数据类型, 而数组中的元…

spring boot admin服务监控报错

使用spring boot admin监控服务启动出现报错:adminHandlerMapping对象创建失败 org.springframework.beans.factory.BeanCreationException: Error creating bean with name adminHandlerMappingdefined in class path resource [de/codecentric/boot/admin/server…

C++Qt 入门

目录 Qt 是什么 Qt 与 Qt Creator 的关系 暗黑主题音乐播放器界面 UI 设计。 简约的视频界面设计。 炫酷车载音乐 APP 主界面开发。 Qt/C与 QML 如何选择 Qt 版本 Linux 下安装 Qt 配置中文输入法 Qt Creator 简单使用 第一个 Qt 程序 新建一个项目 ​编辑 项目文…

Java JDBC

目录 JDBC定义 为什么需要JDBC JDBC的工作原理 JDBC API JDBC编程模板 JDBC编程步骤 JDBC实战 1.JDBC定义 Java连接数据库的一种能力或是技术 2.为什么需要JDBC 总结:利用JDBC才可以使服务器端和数据库进行数据的传递和交互 场景1: 客户端&am…

chatgpt赋能python:Python选择排序算法图解

Python选择排序算法图解 选择排序是计算机科学中经典的排序算法之一,它的原理是从待排序的数据中选择最小的元素然后排在最前面,接着从剩下未排序的数据中继续这个过程,直到所有的数据都排好序。 在本篇文章中,我将深入探讨Pyth…

微服务架构之网关详解

前言 由于互联网的高速发展,网络数据请求数激增,使得服务器承受的压力越来越大。在早期的系统架构中,为减轻单台服务器的压力,通常使用 Load Balancer 来将网络流量平摊到多个服务器中。如今后端服务的种类和数量在不断变多&…