CSS笔记(黑马程序员pink老师前端)盒子阴影,文字阴影

盒子阴影

属性值为box-shadow,盒子阴影不占空间,不影响盒子之间的距离.

说明
h-shadow必需,水平阴影位置,允许为负值
v-shadow必需,水平阴影位置,允许为负值
blur可选,模糊距离,数值越大影子越模糊
spread可选,影子的尺寸
color可选,影子的颜色
inset可选, 将外阴影改为内阴影(省略即为outset,outset不能出现在语句中)

示例:box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);

鼠标经过盒子添加阴影,最终效果:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><style>.div1 {height: 100px;width: 100px;background-color: pink;}.div1:hover {box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);}
</style><body><div class="div1"></div>
</body></html>

文字阴影

属性值为text-shadow

说明
h-shadow必需,水平阴影位置,允许为负值
v-shadow必需,水平阴影位置,允许为负值
blur可选,模糊距离,数值越大影子越模糊
color可选,影子的颜色

示例:text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GO语言网络编程(并发编程)Goroutine池

GO语言网络编程&#xff08;并发编程&#xff09;Goroutine池 1. Goroutine池 1.1.1. worker pool&#xff08;goroutine池&#xff09; 本质上是生产者消费者模型可以有效控制goroutine数量&#xff0c;防止暴涨需求&#xff1a; 计算一个数字的各个位数之和&#xff0c;例…

router-link 和 router-view的区别

router-link 实现路由之间的跳转 router-view&#xff08;路由出口组件 -> 渲染路径匹配到的视图组件&#xff09; 当你访问的地址与路由path相符时&#xff0c;会将指定的组件替换该router-view router-link router-link 点击实现路由跳转&#xff0c;to属性指向目标地址&…

VM+Ubuntu+Xshell+Xftp安装教程

目录 VM17安装教程 检查网络连接 Ubuntu环境搭建 UBUNTU 系统配置 1、 SSH 服务器配置 服务端&#xff08;必须&#xff09; 1.安装 ssh 服务端 2.确认 sshserver 是否启动了&#xff08;看见 sshd 说明已启动&#xff09; 3.启动 sshserver 4.SSH 配置&#xff08;如果…

【科普向】Jmeter 如何测试接口保姆式教程

现在对测试人员的要求越来越高&#xff0c;不仅仅要做好功能测试&#xff0c;对接口测试的需求也越来越多&#xff01;所以也越来越多的同学问&#xff0c;怎样才能做好接口测试&#xff1f; 要真正的做好接口测试&#xff0c;并且弄懂如何测试接口&#xff0c;需要从如下几个…

【数据结构面试题】栈与队列的相互实现

目录 1.队列实现栈 1.1创建栈 1.2判断是否为空 1.3入栈 1.4出栈 1.5获取栈顶元素 1.6完整代码 2. 用栈实现队列 2.1创建队列 2.2判断是否为空 2.3入队列 2.4出队列 2.5获取队头元素 2.6完整代码 1.队列实现栈 用队列实现栈https://leetcode.cn/problems/impleme…

软件设计模式(三):责任链模式

前言 前面荔枝梳理了有关单例模式、策略模式的相关知识&#xff0c;这篇文章荔枝将沿用之前的写法根据示例demo来体会这种责任链设计模式&#xff0c;希望对有需要的小伙伴有帮助吧哈哈哈哈哈哈~~~ 文章目录 前言 责任链模式 1 简单场景 2 责任链模式理解 3 Java下servl…

【MFC】实现简单UDP通信

创建项目&#xff0c;初始化套接字 创建一个基于对话框的MFC项目&#xff08;名称为UDP&#xff09;&#xff0c;高级功能选中Windows套接字 这个时候在CUDP类的InitInstance()方法中就会出现这样的代码用来初始化套接字 if (!AfxSocketInit()) {AfxMessageBox(IDP_SOCKETS_…

嵌入式基础知识-信息安全与加密

本篇来介绍计算机领域的信息安全以及加密相关基础知识&#xff0c;这些在嵌入式软件开发中也同样会用到。 1 信息安全 1.1 信息安全的基本要素 保密性&#xff1a;确保信息不被泄露给未授权的实体。包括最小授权原则、防暴露、信息加密、物理加密。完整性&#xff1a;保证数…

让GPT成为您的科研加速器丨GPT引领前沿与应用突破之GPT4科研实践技术与AI绘图

GPT对于每个科研人员已经成为不可或缺的辅助工具&#xff0c;不同的研究领域和项目具有不同的需求。如在科研编程、绘图领域&#xff1a;1、编程建议和示例代码:无论你使用的编程语言是Python、R、MATLAB还是其他语言&#xff0c;都可以为你提供相关的代码示例。​2、数据可视化…

LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目解析 使用二分查找的方式&#xff0c;分左右端进行查找。首先使用二分找到左端的端点下标&#xff0c;然后在使用二分找到右端的端点下标。 注意事项 求mid注意事项 在使用二分找左端…

jvm 程序计算器 程序计数器是否溢出 程序计数器是做什么的 java程序计数器会内存溢出吗 程序计数器作用与用处 jvm内存模型 jvm合集(一)

1. jvm内存模型&#xff1a; 内存模型&#xff1a; 程序计数器 堆 栈 本地方法栈 方法区 2. java代码编译为class文件&#xff0c;由类加载器加载到jvm&#xff0c;然后由解释器,jit即时编译到机器码&#xff0c;机器码再到cpu执行 3. 程序计数器&#xff1a; 是一块较小的内存…

记录一次IDEA非法字符‘\ufeff‘报错

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 报错以及Bug ✨特色专栏&#xff1a; …

Hadoop生态之hive

一 概述与特点 之所以把Hive放在Hadoop生态里面去写,是因为它本身依赖Hadoop。Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类 SQL 查询功能。 其本质是将 SQL 转换为 MapReduce/Spark 的任务进行运算,底层由 HDFS 来提供…

[uniapp]踩坑日记 unexpected character > 1或‘=’>1 报错

在红色报错文档里下滑&#xff0c;找到Show more 根据提示看是缺少标签&#xff0c;如果不是缺少标签&#xff0c;看看view标签内容是否含有<、>、>、<号,把以上符合都进行以<号为例做{{“<”}}处理

动态表单设计

动态表单设计 背景方案讨论基于上面分析&#xff0c;对比调研&#xff0c;自定义动态表单数据模型表单详解&#xff08;一&#xff09; 表单模板&#xff1a;jim_dynamic_form&#xff08;二&#xff09;表单数据类型&#xff1a;jim_form_data_type&#xff08;三&#xff09;…

基于SSM的学生公寓管理中心系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Android笔记(二十九):利用python自动生成多语言

背景 项目需要支持十几种多语言&#xff0c;而且每个版本的新功能ui都有很多地方需要多语言&#xff0c;如果手动添加非常耗时&#xff0c;于是设计了一个python脚本&#xff0c;通过excel表格转化多语言到项目values/strings文件内 步骤 android工程项目结构 脚本位于langu…

DevOps到底是什么意思?

前言: 当我们谈到 DevOps 时,可能讨论的是:流程和管理,运维和自动化,架构和服务,以及文化和组织等等概念。那么,到底什么是"DevOps"呢? 那么,DevOps是什么呢? 有人说它是一种方法,也有人说它是一种工具,还有人说它是一种思想。更有甚者,说它是一种哲学…

MySQL的权限管理与远程访问

MySQL的权限管理 1、授予权限 授权命令&#xff1a; grant 权限1,权限2,…权限n on 数据库名称.表名称 to 用户名用户地址 identified by ‘连接口令’; 该权限如果发现没有该用户&#xff0c;则会直接新建一个用户。 比如 grant select,insert,delete,drop on atguigudb.…

淘宝销量展示方式变更背后的逻辑

淘宝销量展示方式发生了调整&#xff0c;平台于8月16日将商品详情销量展示表达由【月销**件】全部换成展示【已售**件】&#xff0c;将30天销量改成了近365天销量。 【已售**件】统计口径&#xff1a;统计近365天支付的商品件数&#xff0c;数据更新请关注24-48小时。其中涉及销…