（15）HTML&&CSS笔记（HTML5标签，hsl颜色）

最新推荐文章于 2021-07-01 19:00:28 发布

沭瑾

最新推荐文章于 2021-07-01 19:00:28 发布

阅读量971

点赞数

分类专栏： HTML&&CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/xiaoma_666/article/details/97396952

版权

HTML&&CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、html5 最新版本；
canvas、svg、数据交互、css3动画效果、css3选择器；

2、h5 结构标签

header 头部标签
section 板块标签
nav 导航栏
footer 页脚
aside 侧边栏，轮播图，nav导航栏

3、语义化标签

article 文章标签或内容标签
hgroup 标题组的标签
time 表示时间或日期的标签
address 地址标签
mark 标记标签

4、颜色：

rgb
rgba
#fff
pink,yellow,blue

颜色 HSL（色彩模式）

h:hue 色调
S:Saturation 饱和度
L:Lightness 明度（纯度）

background-color：hsl(0,100%,50%); 红色
background-color：hsl(360,100%,50%); 红色
background-color：hsl(120,100%,50%); 绿色
background-color：hsl(240,100%,50%); 蓝色

5、currentColor：当前颜色
当前颜色以color字体颜色为标准

6、文字阴影

x-shadow 水平的偏移量负值的时候水平偏左移动正值的时候水平偏右移动
y-shadow 垂直的偏移量正值的时候垂直偏下移动负值的时候垂直偏上移动
blur 模糊的半径
spread 阴影的尺寸大小
color 阴影的颜色

text-shadow:0 0 10px cyan,5px 5px 10px #c0f,-5px -5px 10px #c0f;

在这里插入图片描述
火焰字

<style>
        .fire{ 
            font-size:40px; 
            font-weight:bold;  
            background:#000; 
            text-align:center; 
            padding:24px;   
            text-shadow:0 0 4px white,    
                0 -5px 4px #ff3,   
                3px -10px 6px #fd3,    
                -3px -15px 11px #C90,   
                3px -25px 18px #f20;
            /* 4px -35px 28px #C30;*/
        }
    </style>
<body>
        <p class="pubsty fire">我是凯迪 ，么么哒！！！</p>
</body>

在这里插入图片描述
7、meter 进度条

<meter max='100' min='0' value='80' low='30' high='80'></meter>	绿色
<meter max='100' min='0' value='90' low='30' high='80'></meter>  	黄色
<meter max='100' min='0' value='90' low='80' high='30'></meter>	红色

在这里插入图片描述

沭瑾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（15）HTML&&CSS笔记（HTML5标签，hsl颜色）

1、html5 最新版本；canvas、svg、数据交互、css3动画效果、css3选择器；2、h5 结构标签header 头部标签section 板块标签nav 导航栏footer 页脚aside 侧边栏，轮播图，nav导航栏3、语义化标签article 文章标签或内容标签hgroup 标题组的标签time 表示时间或日期的标签address 地址标签mark ...
复制链接

扫一扫

专栏目录