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

CSS3-Day1

CSS3圆角

border-radius

CSS3盒阴影

box-shadow

CSS3边界图片

border-image
CSS3 background-clip属性

padding-box 沿着边框填充

content-box 在边框外面

CSS3 线性渐变

线性渐变 - 从上到下(默认情况下)#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

线性渐变 - 从左到右

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

线性渐变 - 对角

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

使用透明度(transparent)

们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复的线性渐变

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS3 径向渐变

#grad {
  background-image: radial-gradient(red, yellow, green);
}

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

CSS3 文本效果

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

CSS3 box-shadow属性

div {
    box-shadow: 10px 10px 5px #888888;

div {
    box-shadow: 10px 10px grey;阴影添加颜色
}
}

div {
    box-shadow: 10px 10px 5px grey;添加模糊效果
}

CSS3 Text Overflow属性

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

CSS3 单词拆分换行

p.test1 {
    word-break: keep-all;
}
 
p.test2 {
    word-break: break-all;
}

CSS3 字体

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}

2D 转换

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

3D 转换

  • rotateX()
  • rotateY()

CSS3 过渡

div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

div:hover
{
    width:300px;
}

相关文章:

CSS3-Day1

CSS3圆角 border-radius CSS3盒阴影 box-shadow CSS3边界图片 border-image CSS3 background-clip属性 padding-box 沿着边框填充 content-box 在边框外面 CSS3 线性渐变 线性渐变 - 从上到下(默认情况下)#grad { background-image: linear…...

网站集群批量管理-Ansible(ad-hoc)

1. 概述 1. 自动化运维: 批量管理,批量分发,批量执行,维护 2. 无客户端,基于ssh进行管理与维护 2. 环境准备 环境主机ansible10.0.0.7(管理节点)nfs01 10.0.0.31(被管理节点)backup10.0.0.41(被管理节点) 2.1 创建密钥认证 安装sshpass yum install -y sshpass #!/bin/bash ##…...

github学生认证(Github Copilot)

今天想配置一下Github Copilot,认证学生可以免费使用一年,认证过程中因为各种原因折腾了好久,记录一下解决方法供大家参考。 p.s.本文章只针对Github学生认证部分遇到的问题及解决方法,不包括配置copilot的全部流程~ 1、准备工作…...

【SQL调优指南--附带实例】

以下是50个SQL调优的例子,每个例子都附带了可执行的SQL语句: 删除重复记录: DELETE FROM table_name WHERE id NOT IN (SELECT MIN(id) FROM table_name GROUP BY col1, col2);使用索引来加速查询: ALTER TABLE table_name ADD…...

Java基础(下)

泛型 Java 泛型&#xff08;Generics&#xff09; 是 JDK 5 中引入的一个新特性。使用泛型参数&#xff0c;可以增强代码的可读性以及稳定性。 编译器可以对泛型参数进行检测&#xff0c;并且通过泛型参数可以指定传入的对象类型 ArrayList<Person> persons new Arra…...

【python】极简教程1-何为程序

程序可以简单地理解为一系列执行运算的指令。这些运算可以是数学计算、符号运算(如检索或替换文档中的内容)或图形运算(如处理图像或播放视频)。 不同编程语言的基础指令大致相同,包括: 输入:从键盘、文件、网络或其他设备获取数据。输出:将数据显示在屏幕上、保存到文…...

【Transformer】Selective Attention Improves Transformer

这篇论文主要介绍了一种新方法——选择性注意力&#xff08;Selective Attention&#xff09;&#xff0c;用于改善Transformer模型的性能和效率。 &#x1f913; 摘要 无关元素在注意力机制中的存在会降低模型性能。论文提出了一种无需额外参数的简单调整方法&#xff0c;即…...

博客项目自动化测试(一)

1. 确认博客系统的环境搭建 http://49.235.129.183:8080/java109_blog_system/blog_list.html&#xff0c;即可访问我的小项目&#xff1b; 2. 确定测试用例 测试用例如下所示&#xff1a; 3. 关于登录的测试用例 3.1 初始化和退出浏览器 代码如下&#xff1a; package Blo…...

电商商品API接口系列(商品详情数据)商品比价、数据分析、自营商城上货

电商商品API接口系列中的商品详情数据接口&#xff0c;在商品比价、数据分析以及自营商城上货等方面发挥着重要作用。以下是对这些应用场景的详细分析&#xff1a; 一、商品详情数据接口概述 商品详情数据接口是电商平台上用于提供商品详细信息的API接口。这些接口允许开发者…...

排序算法总结(一)冒泡排序和选择排序

访问www.tomcoding.com网站&#xff0c;学习Oracle内部数据结构&#xff0c;详细文档说明&#xff0c;下载Oracle的exp/imp&#xff0c;DUL&#xff0c;logminer&#xff0c;ASM工具的源代码&#xff0c;学习高技术含量的内容。 冒泡排序 这个算法可以说是排序算法中最著名的…...

伺服电动缸

美国EXLAR原装K系列伺服缸 高精度运动&#xff0c;运动平稳&#xff0c;低噪音&#xff0c;高速度 向下翻动查看更多 力姆泰克伺服电动缸 k系列电动缸采用Exlar滚柱丝杠技术&#xff0c;提供多种不同性能等级的产品&#xff0c;可外配第三方电机。 通用型设计&#xff0c;无…...

深度学习中的logit到底是什么?

1. 问题 在做深度学习的过程中&#xff0c;经常会碰到logit。这个和在学校学的概率有出入&#xff0c;因而想弄明白这到底是个什么参数。 2. 使用logit的原因 定义几率&#xff08;odds&#xff09;和 logit 函数的主要原因在于使用了线性空间转换&#xff0c;使得非线性的概…...

idea使用记录

文章目录 1、idea调出maven窗口2、跳转到指定行 1、idea调出maven窗口 首先尝试菜单栏View→Tool Windows→Maven&#xff0c;如果没有maven那很有可能是idea没有识别到这是一个maven项目&#xff0c;此时可以尝试在项目的pom文件上右击&#xff0c;选择“add as maven projec…...

Python - HTTP servers

python的http.server模块用于HTTP服务器的功能&#xff0c;这个模块是python标准库的一部分&#xff0c;不需要pip install。 使用前需要import&#xff1a; import http.server 然后就可以编辑代码&#xff0c;使用此模块提供的接口&#xff0c;实现http server相关功能。 除…...

内网Debian\Ubuntu服务器安装dep包,基于apt-rdepends下载相关依赖

文章目录 背景一、下载依赖二、拷贝到内网三、 使用dpkg安装可能会遇到的问题 背景 由于生产服务器是Debian\Ubuntu系统且在内网环境&#xff08;不联网&#xff09;&#xff0c;需要使用拷贝deb格式的包使用dpkg的方式进行安装。所以&#xff0c;需要现在联网的环境中将所需的…...

大模型——如何实现超长多轮对话

在自然语言处理的领域中&#xff0c;多轮对话系统是构建智能化交互应用的关键。无论是聊天机器人、虚拟助手&#xff0c;还是客户服务系统&#xff0c;能够保持连贯的对话并记住上下文信息是用户体验的核心。然而&#xff0c;大规模语言模型&#xff08;如GPT等&#xff09;的对…...

大数据面试-笔试SQL

一个表table: c_id u_id score&#xff1b;用SQL计算每个班级top5学生的平均分&#xff08;腾讯&#xff09; select class_id,avg(score) as score_avg from (select *,row_number() over(partition by class_id order by score desc) as score_rank from table ) t1 where t…...

希尔排序和直接插入排序

因为排序这些比较复杂点我就分几期给大家来讲~~~ 直接插入排序 直接插入排序是一种简单的排序算法&#xff0c;主要用于对少量数据进行排序。其基本思想是将待排序的元素逐个插入到已经排好序的部分中&#xff0c;从而形成一个有序序列。 具体步骤如下&#xff1a; 初始化&…...

IDEA 配置 Git 详解

本文将介绍在IntelliJ IDEA 中如何配置Git 没有安装配置 Git 的可以参考我的这篇文章&#xff1a;安装配置 Git 一、操作环境及准备 1.win 10 2.已安装且配置了Git 3.有Gitee账户 4.安装了IntelliJ IDEA 2023.2.1 5.全程联网 二、配置步骤 2.1 配置git 1.采用全局设置&…...

Docker 部署 Redis 监控系统实战:Redis Exporter 与 Prometheus 完整配置指南

Docker 部署 Redis 监控系统实战&#xff1a;Redis Exporter 与 Prometheus 完整配置指南 文章目录 Docker 部署 Redis 监控系统实战&#xff1a;Redis Exporter 与 Prometheus 完整配置指南一 缓存简述二 redis exporter 部署三 环境变量配置四 修改文件权限五 验证 exporter …...

告别手动点鼠标!用Python脚本批量跑Simulink仿真,效率提升10倍

告别手动点鼠标&#xff01;用Python脚本批量跑Simulink仿真&#xff0c;效率提升10倍 在工程仿真领域&#xff0c;Simulink无疑是建模与分析的利器。但当面对参数扫描、蒙特卡洛分析或设计迭代等需要大量重复仿真的场景时&#xff0c;手动操作不仅效率低下&#xff0c;还容易…...

【GIS】深入解析地理学中的尺度三重性:Size、Level、Relation的实践应用

1. 尺度三重性&#xff1a;GIS分析的基石 第一次接触"尺度"概念时&#xff0c;我也被各种术语绕晕过——为什么1:10000叫大比例尺却显示小范围&#xff1f;为什么生态学家说的"尺度"和城市规划师说的完全不是一回事&#xff1f;直到把尺度拆解成Size&#…...

CoPaw个人助理深度体验:多通道对话+定时执行,解放双手的实用工具

CoPaw个人助理深度体验&#xff1a;多通道对话定时执行&#xff0c;解放双手的实用工具 1. CoPaw简介与核心功能 CoPaw是一款基于Qwen3-4B-Instruct-2507模型的个人助理型产品&#xff0c;由AgentScope团队开发。它最大的特点是能够部署在用户自己的环境中&#xff0c;实现数…...

智能抢票系统:从技术实现到场景落地

智能抢票系统&#xff1a;从技术实现到场景落地 【免费下载链接】Automatic_ticket_purchase 大麦网抢票脚本 项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase 你是否曾遇到这样的场景&#xff1a;苦等数月的演唱会门票在开票瞬间售罄&…...

Intel XE核显PyTorch环境搭建避坑指南

1. 为什么选择Intel XE核显跑PyTorch&#xff1f; 最近很多小伙伴都在问&#xff0c;用Intel XE核显跑PyTorch到底靠不靠谱&#xff1f;作为一个在AI领域摸爬滚打多年的老司机&#xff0c;我可以很负责任地告诉你&#xff1a;完全可行&#xff01;特别是对于预算有限的学生党&a…...

半导体器件入门:金半接触的5个关键概念解析(附手稿能带图)

半导体器件入门&#xff1a;金半接触的5个关键概念解析&#xff08;附手稿能带图&#xff09; 第一次翻开半导体物理教材时&#xff0c;金半接触那一章总是让人既兴奋又困惑。那些弯曲的能带图、费米能级的移动、神秘的势垒高度&#xff0c;就像一道通往微电子世界的大门。本文…...

Graphormer图神经网络效果展示:含手性中心/立体异构体分子的预测能力验证

Graphormer图神经网络效果展示&#xff1a;含手性中心/立体异构体分子的预测能力验证 1. 模型概述 Graphormer是一种基于纯Transformer架构的图神经网络&#xff0c;专门为分子图&#xff08;原子-键结构&#xff09;的全局结构建模与属性预测而设计。该模型在OGB&#xff08…...

程序员做量化交易详解

程序员做量化交易详解 量化交易是程序员将编程能力与金融市场相结合的典型应用场景。作为系统分析师,理解量化交易的全貌有助于在金融IT系统设计中把握关键要素。下面为你全面解析。 📌 一、什么是量化交易? 量化交易是指利用数学模型、统计方法和计算机技术,通过程序化…...

[Python3高阶编程] - 异步编程深度学习指南一: 基础知识( 源代码)

异步编程深度学习指南 原文: https://blog.csdn.net/andylin02/article/details/159649164?spm1001.2014.3001.5502 #!/home/admin/.pyenv/versions/3.9.12/bin/python # -*- coding: utf-8 -*-o import aiohttp import asyncio from asyncio import Semaphoreasync def fetc…...

千问3.5-2B实战教程:将网页交互结果接入企业微信机器人,实现图片秒级响应

千问3.5-2B实战教程&#xff1a;将网页交互结果接入企业微信机器人&#xff0c;实现图片秒级响应 1. 项目背景与价值 在日常工作中&#xff0c;我们经常需要快速处理大量图片信息。比如电商团队需要审核商品主图&#xff0c;市场部门需要分析竞品海报&#xff0c;客服团队要识…...