个人css样式_2: 渐变色
css的魅惑力
css渐变色用途还是
比较广的。
----------------------------
效果图:

html代码(三个div):
<div class="div1" style="">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
-------------------------
css代码:
.div2{
width:120px;height:120px;
border:1px solid orange;
border-radius: 50%;
background: radial-gradient(black, blue, green, yellow, red, white 70%)
}
.div3{
width:120px;height:120px;
border:1px solid violet;
border-radius: 50%;
background: linear-gradient(white 4%,red,blue,black,green,yellow,white 98%)
}
.div1{
width:120px;height:120px;
border:1px solid cyan;
border-radius: 50%;
background: linear-gradient(to right,black,green,yellow,white,red,blue,black)
}
个人css样式_2: 渐变色的更多相关文章
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- 【03】全局 CSS 样式
全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...
- CSS基础 华为渐变色产品列表 综合实战
华为网页链接:https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent html代码部分: <div class=&qu ...
- CSS样式快速入门
CSS样式快速入门 前言 前端基础的博客主要分为HTML.CSS和JavaScript,本类博客主要用于记录博主的学习过程和分享学习经验,由于博主学识浅薄,经验不足,难免会出现错误,欢迎大家提出问题. ...
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- 脚本工具(获取某个文件夹下的所有图片属性批量生成css样式)
问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
随机推荐
- python70 前端框架之vue js的集中循环方式、key值的解释、input事件、v-model双向数据绑定、过滤案例、事件修饰符、按键修饰符、表单控制
js的几种循环方式 v-for可以循环的变量 可以循环的: 数组.数组带索引 对象.对象带key.value 字符串 字符串带索引 数字.数字带索引 <!DOCTYPE html> < ...
- VMwarestation安装centos系统
上机实验1 1.软硬件准备 软件:推荐使用vmware 镜像:centos7下载网址https://mirror.iscas.ac.cn/centos/7/isos/x86_64/ 这个镜像网址实测比 ...
- .NET 8 预览版 1:NativeAOT 升级和新的Blazor United
.NET团队 今天在官方博客上 发布了.NET 8的第一个预览版,.NET 8 是一个长期支持 (LTS) 版本[1],.NET 的版本包括产品.库.运行时和工具,是 Microsoft 内部和外部多 ...
- P3387 缩点
\(Tarjan\) 模板 #include<cstdio> #include<queue> #include<iostream> #define re regis ...
- .net 下SSE使用demo
所谓SSE,就是浏览器向服务器发送一个HTTP请求,然后服务器不断单向地向浏览器推送"信息"(message).这种信息在格式上很简单,就是"信息"加上前缀&q ...
- LeetCode算法训练-动态规划
欢迎关注个人公众号:爱喝可可牛奶 LeetCode算法训练-动态规划 理论知识 动态规划当前状态是由前一个状态推导出来的,而贪心没有状态的转移 动态规划需要借助dp数组,可能是一维也可能是二维的 首先 ...
- ChatGpt聊天API使用
昨天ChatGpt发布了聊天API,新增了两个模型,目前还是测试阶段 gpt-3.5-turbo 功能强大的GPT-3.5模型,专门针对聊天做了优化 gpt-3.5-turbo-0301 此模型只支持 ...
- vue3.0中ref动态绑定
// 自己使用 <div v-for="item in ['lisi','wanger']" :key="item"> <test :ref= ...
- (四)Mysql之索引介绍
索引数据结构的选择:Hash表.二叉树.平衡二叉树.(红黑树近似于平衡二叉树).B树.B+树1)Hash表:Java的HashMap.TreeMap就是Hash表结构,以键值对存储,时间复杂度是O(1 ...
- Android 缩小动画
public class MainActivity extends AppCompatActivity { private ConstraintLayout content; @Override pr ...