HTML5:七天学会基础动画网页5

CSS3渐变

(可以给背景颜色设置一个渐变的效果)

线性渐变:Linear Gradients(从直线上向远处见面)

语法:

background:linear-gradient(direction,color-stop1,color-stop2…);

direction:方向 to left, to right, 90deg

径向渐变:Radial Gradients(从中间向外渐变)

语法:

background:radial-gradient(center/ellipes/circle,shape size,start-color,…last-color);

circle表示圆形,ellipse表示椭圆形。

我们来随便写一个

<style>

         *{

            margin: 0;

            height: 0;

         }

         .box{

            width: 300px;

            height: 500px;

            border: 1px solid black;

            margin: 60px auto;

         }

         .box:hover{

           background-image: linear-gradient(to left,white,red);

         }

    </style>

</head>

<body>

   <div class="box"></div>

</body>

1e051064250e4b3d9a3a4594d0c91ca1.png

 如果使用background-image: radial-gradient(red,pink,white)就是这样的效果

48af4967529c4b04874e37fe79afae38.png

这个的应用场景就不多说了,大家放开想象,肯定会有不一样的效果的。

CSS3文本效果

text-shadow

向文本添加阴影:h-shadow水平方向偏移量,v-shadow垂直方向偏移量,blur模糊度,color颜色。

 例:<style>
         *{
            margin: 0;
            height: 0;
         }
         h1{
            font-size: 200px;
            text-align: center;
            font-weight: 900;
            margin: 50px;
            text-shadow: 5px 4px 5px #999;
         }
    </style>
</head>
<body>
   <h1>Hello World</h1>

</body>

c7a3c55ec55e4b8aa688ea7706d3844a.png

 再稍微改一下字宽看起来高级一点

45cc0ec08434464dadd5bb911c9b28b0.png

 具体情况,具体调整。

有时候我们写文本会遇到这种情况:

47c5e5c7d44948e688499dce6ce072e3.png

 文本内容超出了div,可以用超出部分隐藏或换行来处理

这里有几个关于隐藏与换行的设置:

text-overflow 超出部分显示省略号

overflow:hidden 溢出隐藏

text-overflow :ellipsis 用省略号来代替被修剪文本

  例:

.box{

         width: 300px;

         height: 50px;

         border: 3px solid #999;

         margin: 40px auto;

         white-space: nowrap;

         overflow: hidden;

         text-overflow: ellipsis;

        }

58fc436c5de946a4b23864d34f5c4d05.png

 先强制不换行,再超出部分隐藏,最后超出部分省略就可以了

强制换行

1.word-break:break-all;只对英文起作用

2.word-warp:break-word;这对英文起作用,以单词作为换行的依据

3.white-space:pre-wrap;只对中文起作用

4.white-space:nowrap;强制不换行,都起作用

 

 

 

 

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

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

相关文章

Python Flask Web + PyQt 前后端分离的项目—学习成绩可视化分析系统

简介 使用工具&#xff1a; Python&#xff0c;PyQt &#xff0c;Flask &#xff0c;MySQL 注&#xff1a;制作重点在网页端&#xff0c;因此网页端的功能更全 WEB界面展示: 系统登录分为管理员&#xff0c;老师&#xff0c;学生3部分 管理员统一管理所有的账号信息以及登录…

Jenkins发送邮件、定时执行、持续部署

集成Allure报告只需要配置构建后操作即可。但如果是web自动化&#xff0c;或是用HTMLTestRunner生成报告&#xff0c;构建后操作要选择Publish HTML reports&#xff0c;而构建中还要添加Execute system Groovy script插件&#xff0c;内容&#xff1a; System.setProperty(&q…

【数据结构】用队列实现栈

下面是一些思路分析和代码分享&#xff0c;有需要借鉴即可。 1.问题描述 我想用队列来实现栈的功能&#xff0c;具体而言是用两个队列做底层做出栈的功能来。 有人可能会疑问会不会多次一举&#xff0c;这里仅作练习&#xff0c;为了更加进一步了解栈/队列的性质 2.思路分析 …

基于Spring Boot+ Vue的房屋租赁系统

末尾获取源码作者介绍&#xff1a;大家好&#xff0c;我是墨韵&#xff0c;本人4年开发经验&#xff0c;专注定制项目开发 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 二、开发技术与环…

抉择与发展:详解程序员在前端、后端与数据科学赛道上的职业定位与成长路径

作为一个程序员&#xff0c;选择职业赛道就像是在一座迷宫中探索前端的美丽花园&#xff0c;后端的黑暗洞穴&#xff0c;还有数据科学的神秘密室。每一条赛道都充满了挑战和机遇&#xff0c;而选择哪一条赛道将直接影响到你未来的职业发展和成就。对于每一位准备投身或已经在编…

搜维尔科技:捕获、分析、优化,使用 Xsens Ergo 创建更安全的工作空间

简化人体工程学分析&#xff0c;优先考虑员工福祉&#xff0c;并利用客观数据和见解提高生产力。 捕获。分析。优化。使用 Xsens Ergo 创建更安全的工作空间 1.质量数据 使用高质量、客观且经过验证的运动数据进行详细的人体工程学分析 2.随处使用 在最具挑战性的工作环境中…

HarmonyOS Stage模型 用程序运行切换 验证UIAbility 启动模式(下) 验证:specified启动模式 Ability间切换

上文 HarmonyOS Stage模型 用程序运行切换 验证UIAbility 启动模式(上) 验证:singleton、multiton、standard启动模式 我们已经验证完了 singleton multiton standard 三种启动模式 留下了毕竟复杂的 specified 这里 首先 我们要写两个不同的界面 index 编写代码如下 import…

centos 搭建ftp服务器

项目上需要用到ftp文件服务同步&#xff0c;所以在测试环境进行搭建&#xff0c;其中遇到了一些问题&#xff0c;遂记录。 1、安装vsftpd软件包 打开终端并输入以下命令来安装vsftpd yum install vsftpd -y 2、运行vsftpd systemctl start vsftpd 3、测试匿名连接 我这里…

Vue组件间通信实践

Vue组件间通信实践 &#x1f31f; 前言 欢迎来到我的小天地&#xff0c;这里是我记录技术点滴、分享学习心得的地方。&#x1f4da; &#x1f6e0;️ 技能清单 编程语言&#xff1a;Java、C、C、Python、Go、前端技术&#xff1a;Jquery、Vue.js、React、uni-app、EchartsUI设…

蓝桥杯每日一题(二分)

//1460 我在哪 暴力方法改了40分钟&#xff0c;好在ac了 思路&#xff1a;依次枚举所有字符&#xff08;外层循环&#xff09;&#xff1b; 第一个没有注意的点&#xff1a;没有加j的中间那层循环&#xff0c;直接用的while&#xff0c;这样会导致i后面可能有多个j的位置与i…

激光雷达点云数据邻域特征计算理论知识学习

一、数学理论 &#xff08;一&#xff09;SVD奇异值分解&#xff08;Singular value decomposition&#xff09; 奇异值分解是线性代数中一种重要的矩阵分解&#xff0c;在信号处理、统计学等领域有重要应用。奇异值分解在某些方面与对称矩阵或埃尔米特矩阵基于特征向量的对角…

Java学习笔记007——接口的应用

1、接口的转换&#xff08;向下&#xff09; 子类对向和父类对象可以进行类型转化。接口也一样可以。 package com.test;// 接口Animal public interface Animal {void bark(); //等价于public abstract void bark();void move(); //等价于public abstract void move(); }pac…

Spring总结之构造注入

构造注入&#xff1a; Spring调用类的有参构造&#xff0c;在构造方法中给属性赋值 构造注入使用的是<constructor-arg>标签&#xff0c;一个<constructor-arg>标签表示构造方法的一个参数。 <constructor-arg>标签属性&#xff1a; name&#xff1a;表示构…

C 数据类型

在 C 语言中&#xff0c;数据类型指的是用于声明不同类型的变量或函数的一个广泛的系统。变量的类型决定了变量存储占用的空间&#xff0c;以及如何解释存储的位模式。 C 中的类型可分为以下几种&#xff1a; 序号类型与描述1基本数据类型 它们是算术类型&#xff0c;包括整型…

pytest 教程

1. 安装pytest 目前我使用的python版本是3.10.8 pip install pytest命令会安装下面的包&#xff1a; exceptiongroup-1.2.0-py3-none-any.whl iniconfig-2.0.0-py3-none-any.whl packaging-23.2-py3-none-any.whl pluggy-1.4.0-py3-none-any.whl pytest-8.0.2-py3-none-any.…

线性代数笔记10--矩阵的四个基本子空间

0. 引入 矩阵 A m n A_{m \times n} Amn​ 1. 列空间 C ( A ) C(A) C(A)在 R m R^m Rm中 d i m ( C ( A ) ) p i v o t _ c o l u m n _ c n t r a n k ( A ) r dim(C(A))pivot\_column\_cnt rank(A)r dim(C(A))pivot_column_cntrank(A)r 2. 零空间 N ( A ) N(A) N(A)…

web自动化笔记十六:日志收集

日志的作用&#xff1a; -调试程序 -了解系统程序运行情况&#xff0c;是否正常 -系统程序运行故障分析与问题定位 -用来做用户行为分析的数据统计 日志级别&#xff1a;是指日志信息的优先级、重要性或者严重程度 DEBUG&#xff1a;调试级别&#xff0c;…

Kubernetes 外部 HTTP 请求到达 Pod 容器的全过程

文章目录 1、问题一2、HTTP 请求流转过程概述图3、详细过程分析4、容器技术底座5、问题二6、详细过程分析(补充) 1、问题一 当外部发送一个HTTP/HTTPS 请求到Kubernetes 集群时&#xff0c;它是如何达到 Pod 中的 container 的呢&#xff1f; 2、HTTP 请求流转过程概述图 3、…

Scrapy与分布式开发(2.8):布隆过滤器原理及应用

布隆过滤器原理及应用 定义 布隆过滤器&#xff08;Bloom Filter&#xff09; 是一种空间效率极高的概率型数据结构&#xff0c;用于测试一个元素是否在一个集合中。它的优点是空间效率和查询时间都远超过一般的算法&#xff0c;缺点是有一定的误识别率和删除困难。 原理 布…

【论文阅读】(DALLE-3)Improving Image Generation with Better Captions

&#xff08;DALLE-3&#xff09;Improving Image Generation with Better Captions 文章目录 &#xff08;DALLE-3&#xff09;Improving Image Generation with Better Captions简介Method实验 引用&#xff1a; Betker J, Goh G, Jing L, et al. Improving image generation…