CSS 渐变、文本效果、字体

一、CSS3渐变：

CSS3渐变（gradient）可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3定义了两种类型的渐变（gradient）：线性渐变（linear gradient）-向下/向上/向左/向右/对角方向渐变；径向渐变（radial gradient）-由它们的中心定义。

1）、线性渐变的语法：

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

从上到下的线性渐变：

<style>

#grad {

    height: 200px;

background-color: red; /* 浏览器不支持时显示 */

    background-image: linear-gradient(#e66465, #9198e5);

}

</style>

从左到右的线性渐变：

<style>

#grad {

    height: 200px;

    background-color: red;

    background-image: linear-gradient(to right, red , yellow);

}

</style>

对角线性渐变：

<style>

#grad1 {

    height: 200px;

    background-color: red; /* 不支持线性的时候显示 */

    background-image: linear-gradient(to bottom right, red , yellow);

}

</style>

使用角度线性渐变的语法：

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的夹角。逆时针方向计算。

<style>

#grad1 {

  height: 100px;

  background-color: red;

  background-image: linear-gradient(0deg, red, yellow);

}

#grad2 {

  height: 100px;

  background-color: red;

  background-image: linear-gradient(90deg, red, yellow);

}

#grad3 {

  height: 100px;

  background-color: red;

  background-image: linear-gradient(180deg, red, yellow);

}

#grad4 {

  height: 100px;

  background-color: red;

  background-image: linear-gradient(-90deg, red, yellow);

}

</style>

使用多个颜色节点的线性渐变：

<style>

#grad1 {

    height: 200px;

background-color: red;

    background-image: linear-gradient(red, green, blue);

}

#grad2 {

    height: 200px;

    background-color: red;

background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet); }

#grad3 {

    height: 200px;

background-color: red;

background-image: linear-gradient(red 10%, green 85%, blue 90%); }

</style>

使用透明度的线性渐变：

<style>

#grad1 {

height: 200px;

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

}

</style>

重复的线性渐变：

<style>

#grad1 {

  height: 200px;

  background-color: red; /* 浏览器不支持的时候显示 */

  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

}

#grad2 {

  height: 200px;

  background-color: red; /* 浏览器不支持的时候显示 */

  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);

}

#grad3 {

  height: 200px;

  background-color: red; /* 浏览器不支持的时候显示 */

  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);

}

#grad4 {

  height: 200px;

  background-color: red; /* 浏览器不支持的时候显示 */

  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);

}

</style>

2）、径向渐变：

径向渐变有它的中心定义。为了创建一个径向渐变，必须至少定义两种颜色节点，同时，可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是center，渐变的形状是ellipse（椭圆形），渐变的大小是farthest-corner（到最远的角）。

径向渐变的语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

径向渐变-颜色节点不均匀分布：

<style>

#grad1 {

    height: 150px;

    width: 200px;

background-color: red;

background-image: radial-gradient(red 5%, green 15%, blue 60%);

}

</style>

径向渐变-颜色节点均匀分布：

<style>

#grad1 {

    height: 150px;

    width: 200px;

    background-color: red;

    background-image: radial-gradient(red, green, blue);

}

</style>

径向渐变-设置形状：

<style>

#grad1 {

    height: 150px;

    width: 200px;

    background-color: red; /* 浏览器不支持的时候显示 */

    background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */

}

#grad2 {

    height: 150px;

    width: 200px;

    background-color: red; /* 浏览器不支持的时候显示 */

    background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */

}

</style>

径向渐变-设置大小：closest-side、farthest-side、closest-corner、farthest-corner。

<style>

#grad1 {

  height: 150px;

  width: 150px;

  background-color: red; /* 浏览器不支持的时候显示 */

  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);

}

#grad2 {

  height: 150px;

  width: 150px;

  background-color: red; /* 浏览器不支持的时候显示 */

  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

}

#grad3 {

  height: 150px;

  width: 150px;

  background-color: red; /* 浏览器不支持的时候显示 */

  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);

}

#grad4 {

  height: 150px;

  width: 150px;

  background-color: red; /* 浏览器不支持的时候显示 */

  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);

}

</style>

重复的径向渐变：

<style>

#grad1 {

  height: 200px;

  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

}

</style>

二、CSS3文本效果：

CSS3文本效果包含text-shadow、box-shadow、text-overflow、word-wrap、word-break。

1、文本阴影：

text-shadow属性适用于文本阴影，指定水平阴影、垂直阴影、模糊的距离以及阴影的颜色：

<style>

h1

{

text-shadow: 5px 5px 5px #FF0000;

}

</style>

2、盒子阴影：

box-shadow属性适用于盒子阴影。

<style>

div

{

width:300px;

height:100px;

background-color:blue;

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

}

</style>

可以在 ::before 和 ::after 两个伪元素中添加阴影效果

<style>

#boxshadow {

    position: relative;

    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);

    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

    padding: 10px;

    background: white;

}

/* Make the image fit the box */

#boxshadow img {

    width: 100%;

    border: 1px solid #8a4419;

    border-style: inset;

}

#boxshadow::after {

    content: '';

    position: absolute;

    z-index: -1; /* hide shadow behind image */

    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

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

    width: 70%;

    left: 15%; /* one half of the remaining 30% */

    height: 100px;

    bottom: 0;

}

</style>

3、文本溢出：

text-overflow属性指定向用户如何显示溢出的内容：

<style>

div.test

{

white-space:nowrap;

width:12em;

overflow:hidden;

border:1px solid red;

}

</style>

4、换行：

word-wrap属性用于文本换行：

<style>

p.test

{

width:11em;

border:1px solid #000000;

word-wrap:break-word;

}

</style>

5、单词拆分换行：

word-break拆分换行属性指定换行规则：

<style>

p.test1

{

width:9em;

border:1px solid #000000;

word-break:keep-all;

}

p.test2

{

width:9em;

border:1px solid #000000;

word-break:break-all;

}

</style>

CSS3新文本属性：

三、CSS3字体：

使用CSS3，网页设计师可以使用任何需要的字体。这些字体在CSS3@font-face规则中定义。在@font-face规则中，首先定义字体的名称，然后指向该字体文件。

<style>

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf')

,url('Sansation_Light.eot'); /* IE9 */

}

@font-face

{

font-family: myFirstFont;

src: url(sansation_bold.woff);

font-weight:bold;

}

div

{

font-family:myFirstFont;

}

</style>

CSS3字体描述：

描述符

值

描述

font-family

name

必需。规定字体的名称。

src

URL

必需。定义字体文件的 URL。

font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded

可选。定义如何拉伸字体。默认是 "normal"。

font-style
  • normal
  • italic
  • oblique

可选。定义字体的样式。默认是 "normal"。

font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

可选。定义字体的粗细。默认是 "normal"。

unicode-range

unicode-range

可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

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

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

相关文章

MySQL–第4关：查询用户日活数及支付金额

MySQL–第4关：查询用户日活数及支付金额

MySQL–第4关&#xff1a;查询用户日活数及支付金额 – WhiteNights Site 标签&#xff1a;MySQL 非常好的题&#xff0c;爱来自中国。 题目 没啥用 任务描述 现有3张业务表&#xff0c;详见如下: 需要输出结果如下&#xff0c;没有支付的日期不需要显示&#xff0c;请写出对…
阅读更多...
设计模式——建造者模式

设计模式——建造者模式

目录 建造者模式盖房项目需求基本介绍四个角色实例代码注意事项和细节抽象工厂模式 VS 建造者模式 建造者模式 盖房项目需求 传统方式&#xff1a;打地基&#xff0c;砌墙&#xff0c;封顶 盖房子步骤 public abstract class AbstractHouse {// 地基public abstract void b…
阅读更多...
【小白专用】PHP中的JSON转换操作指南 23.11.06

【小白专用】PHP中的JSON转换操作指南 23.11.06

一、JSON的基础知识 1.1JSON数据格式 JSON数据格式是一组键值对的集合&#xff0c;通过逗号分隔。键值对由“键”和“值”组成&#xff0c;中间使用冒号分隔。JSON数据格式可以嵌套&#xff0c;而且可以使用数组 二、PHP中的JSON函数 JSON的操作需要使用编程语言进行处理&am…
阅读更多...
软考软件设计师刷题笔记整理

软考软件设计师刷题笔记整理

软件设计师 HTML代码中&#xff0c;创建指向邮箱地址的链接正确的是ARP攻击造成网络无法跨网段通信的原因是在软件开发过程中进行风险分析关于哈夫曼树的叙述关于风险管理的叙述ISO/IEC9126软件质量模型关于结构化开发方法的叙述分布式数据库中的分片透明、复制透明、位置透明和…
阅读更多...
day61--单调栈2

day61--单调栈2

503.下一个更大元素II 42. 接雨水 第一题&#xff1a;下一个更大元素2 给定一个循环数组&#xff08;最后一个元素的下一个元素是数组的第一个元素&#xff09;&#xff0c;输出每个元素的下一个更大元素。数字 x 的下一个更大的元素是按数组遍历顺序&#xff0c;这个数字之…
阅读更多...
前端工程化（vue2）

前端工程化（vue2）

一、环境准备 1.依赖环境&#xff1a;NodeJS 官网&#xff1a;Node.js 2.脚手架&#xff1a;Vue-cli 参考网址&#xff1a;安装 | Vue CLI 介绍&#xff1a;Vue-cli用于快速的生成一个Vue的项目模板。主要功能有&#xff1a;统一的目录结构&#xff0c;本地调试&#xff0…
阅读更多...
小程序day04

小程序day04

目标 自定义组件 创建组件 引用组件 局部引用 全局引用 组件的函数定义到metods节点中&#xff0c;梦回vue2. 样式 数据&#xff0c;方法&#xff0c;属性 下划线开头的称为自定义方法&#xff0c;非下划线开头的都是事件处理函数。 神特么&#xff0c;this.datathis.pro…
阅读更多...
一种ESDF地图实现方法：FIESTA

一种ESDF地图实现方法：FIESTA

背景&#xff1a; 在机器人定位、行动规划中建图是一个很重要的工作&#xff0c;只有通过感知器感知到自己在哪、周围有什么&#xff1b;才能为下一步行动作出决策的依据。然而要知道自己在哪&#xff0c;就必须要有一个整体规划和参照也就是所谓的地图。地图相当于是一次规划…
阅读更多...
c语言 结构体 简单实例

c语言 结构体 简单实例

结构体 简单例子 要求&#xff1a; 结构体保存学生信息操作 代码 #include <stdio.h>//定义结构体 struct student{int ID;char name[20];char sex;char birthday[8];int grade; };int main(){int number;printf("请输入学生个数&#xff1a;");scanf(&quo…
阅读更多...
java入门，记一次mysql函数使用

java入门，记一次mysql函数使用

一、前言 记一次mysql函数使用&#xff0c;要求给一个字段进行拼接&#xff0c;然后MD5加密&#xff0c;再转换成大写。这里都是有现成的函数&#xff0c;所以记录下来 二、函数使用 1、拼接函数&#xff1a; concat(字符串1,字符串2) select concat(字符串1,字符串2); 2、…
阅读更多...
【Linux】：git基本操作_添加文件_两种场景_查看.git文件 || git修改文件 || 版本回退

【Linux】：git基本操作_添加文件_两种场景_查看.git文件 || git修改文件 || 版本回退

&#x1f3af;添加⽂件–场景⼀ &#x1f3af;在包含.git的⽬录下新建⼀个ReadMe⽂件&#xff0c;我们可以使⽤ git add 命令可以将⽂件添加到暂存区&#xff1a; • 添加⼀个或多个⽂件到暂存区&#xff1a; git add [file1] [file2] … • 添加指定⽬录到暂存区&#xff0c;…
阅读更多...
Tomcat，jdk下载配置（发布项目）

Tomcat，jdk下载配置（发布项目）

Tomcat&#xff0c;jdk下载&#xff0c; 远程连接 启动以下服务 高级设置 允许别人连接进来 网上搜索jdk下载即可 双击下一步即可 下一步 输入java&#xff0c;看有没有安装成功 这是安装成功的 Tomcat就可以安装了 和以上操作一样&#xff0c;在网上下载安装包&#xff0c;…
阅读更多...
11月9日星期四今日早报简报微语报早读

11月9日星期四今日早报简报微语报早读

11月9日星期四&#xff0c;农历九月廿六&#xff0c;早报微语早读。 1、中国数字经济规模十年增至50.2万亿元&#xff0c;网民规模增至10.79亿&#xff1b; 2、世界互联网发展指数排名发布&#xff1a;中国位居第二&#xff1b; 3、中国—拉美开发性金融合作机制扩容&#x…
阅读更多...
【Mysql】where 条件子句之逻辑运算符

【Mysql】where 条件子句之逻辑运算符

逻辑运算符 and &&or ||not ! student表 一.查询分数在80 - 90之间 and写法 &&写法 区间&#xff08;between ....and......) 二.查询分数不为88 &#xff01;写法 not写法 三.查询分数大于88或者年龄小于22 满足其中一个条件即可 or写法 ||写法
阅读更多...
CocosCreator3.8原生引擎源码研究

CocosCreator3.8原生引擎源码研究

1. Cocos Creator引擎架构图 2. 原始引擎源码流程图 下图中包含Android native层引擎到js适配层的启动和主循环的启用流程和必要说明&#xff0c;本猿比较懒&#xff0c;暂时不细述了&#xff0c;各位看官直接看图吧&#xff0c;还在细化扩充&#xff0c;后续逐渐更新。。。 版…
阅读更多...
润色论文Prompt

润色论文Prompt

你好&#xff0c;我现在开始写论文了&#xff0c;我希望你可以扮演帮我润色论文的角色我写的论文是关于xxxxx领域的xxxxx&#xff0c;我希望你能帮我检查段落中语句的逻辑、语法和拼写等问题我希望你能帮我检查以下段落中语句的逻辑、语法和拼写等问题同时提供润色版本以符合学…
阅读更多...
【阿里云】任务2-OSS对象存储教程（找我参加活动可获得京东卡奖励）

【阿里云】任务2-OSS对象存储教程（找我参加活动可获得京东卡奖励）

目录 前言说明第一步第二步第三步&#xff1a;开通并使用OSS传输加速三、清理第四步-提交作品第五步-提交记录到小程序 前言 本次任务是阿里云官方发出的&#xff0c;每个任务30软妹币&#xff0c;欢迎大家加入我的活动群&#xff0c;门槛很低&#xff0c;所有人都可以参加&…
阅读更多...
CSS实现文本左右对齐

CSS实现文本左右对齐

因为文本里面有中午符号&#xff0c;英文&#xff0c;英文符号等&#xff0c;导致设置宽度以后右侧凌乱&#xff0c;可以通过以下代码设置样式&#xff0c;让文本工整对齐。 让我们看一下设置前和设置后的对比图片&#xff1a; 效果图如下&#xff1a;&#xff08;左边是设置…
阅读更多...
小程序多文件上传 Tdesign

小程序多文件上传 Tdesign

众所周知&#xff0c;小程序文件上传还是有点麻烦的&#xff0c;其实主要还是小程序对的接口有诸多的不便&#xff0c;比如说&#xff0c;文件不能批量提交&#xff0c;只能一个个的提交&#xff0c;小程序的上传需要专门的接口。 普通的小程序的页面也比普通的HTML复杂很多 现…
阅读更多...
广和通5G模组FM650助力阿里云打造无影魔方Pro

广和通5G模组FM650助力阿里云打造无影魔方Pro

随着云基础设施的完善及云电脑体验的不断优化&#xff0c;越来越多的个人和企业选择无影云电脑进行办公。基于云原生的云网端技术架构&#xff0c;无影云电脑相比传统PC&#xff0c;具有弹性、安全、保障个人数据等产品优势。 10月31日&#xff0c;阿里云在杭州云栖大会上宣布…
阅读更多...
最新文章

Copyright @ 2022~2023