CSS3学习笔记（2）——颜色、文本阴影、盒模型

最新推荐文章于 2022-05-18 19:46:30 发布

想成为大佬的鸭子

最新推荐文章于 2022-05-18 19:46:30 发布

阅读量261

点赞数

分类专栏： CSS 文章标签： CSS3

本文链接：https://blog.csdn.net/weixin_41309331/article/details/96757827

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

颜色设置

HTML5中提供了两种颜色设置：

1.RGBA：

R：红色值，0~255之间，rgb(255,0,0) 代表纯红色；

G：绿色值，0~255之间，rgb(0,255,0) 代表纯绿色；

B：蓝色值，0~255之间，rgb(255,0,0) 代表纯蓝色；

A：Alpha，透明度，0~1之间，不可为负数。

2. HSLA：

H：Hue，色调、色相。取值为0~360，过渡为“红橙黄绿青蓝紫红”，0和360代表红色，30代表橙色，60代表黄色，120代表绿色，180代表青色，240代表蓝色，300代表紫色。见下图：

S：Saturation，饱和度，取值为0.0%~100.0%；

L：Lightness，亮度，取值为0.0%~100.0%，50%是默认值和平衡值。

A：Alpha，透明度，取值0~1之间。

透明度

在之前我们用 opacity 来设置透明度，也是可行的。但是 opacity 只能针对整个盒子设置透明度。子盒子及内容会继承父盒子的透明度；

rgba来控制颜色和透明度，相对于 opacity，不具有继承性。

文本阴影

text-shadow

语法：text-shadow: offsetX offsetY blur color;

其中，offsetX 和 offsetY 分别表示坐标轴坐标；blur 为模糊值。

可以同时为一个文本设置多种阴影：text-shadow: offsetX1 offsetY1 blur1 color1, offsetX2 offsetY2 blur2 color2;

边框阴影

box-shadow

语法：box-shadow: h v blur spread color inset;

其中，

h 和 v 分别表示水平和垂直，用法与文本阴影的 offsetX 和 offsetY相同；

blur 表示模糊值，可选值，默认为0；

spread 表示阴影的尺寸，可以扩展或收缩阴影大小，可选值，默认为0；

color 表示颜色，可选值，默认为0；

inset 表示内阴影。一般配合设置两个阴影，以达到四个方向都有阴影，如：

box-shadow: -10px 10px 5px 0px rgba(0,0,150,0.2) inset,10px -10px 5px 0px rgba(0,0,150,0.2) inset;

盒模型

CSS的盒子结构如下图

我将这样的盒子结构理解为，一个盒子，外边距 margin 不算的话，它包含了 border、padding、内容三个部分。然而，我们在CSS中设置宽高 width 和 height 时，默认情况下盒子的宽高指的是内容的宽高。这就导致当我要给一个盒子添加 border 或 padding 的时候，页面结构就可能会错位。就比如，还是之前的“动漫信息面板”，当我想要实现在当前盒子拖动元素，盒子边框加粗这个效果时，往往不尽人意：

我们可以看到，网页布局发生了明显的错位，这是由于父盒子的宽度已经不够支撑四个子盒子的宽度总和了。这时候我们可能会将父盒子的宽度调大一点，但是这样子去调试往往不是我们想要看到的。

我们可以通过 box-sizing 设置盒模型来解决这个问题：

box-sizing: content-box：

即默认情况下的盒模型，设置盒子的 width 和 height 仅仅是内容的宽高。

box-sizing: border-box：

设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容。如果添加了 padding 和 border,那么真正放置内容的区域会减小-，但是它可以稳固页面的结构。

边框圆角

border-radius 可以用来设置边框圆角。后面的像素值表示半径，拿右上角作为例子来解释：（如图）

添加圆角的各种情况：

border-radius: 10px;	设置四个角的相同圆角值
border-radius: 10px 20px;	第一个值设置左上↖和右下↘，第二个值设置右上↗和左下↙
border-radius: 10px 20px 30px;	第一个值设置左上↖，第二个值设置右上↗和左下↙，第三个值设置右下↘
border-radius: 10px 20px 30px 40px;	分别设置左上，右上，右下，左下
border-radius: 50px/100px;	设置水平x/垂直y 方向的半径值
border-top-left: 10px; border-top-right: 10px; border-bottom-left: 10px; border-bottom-right: 10px;	指定位置添加圆角
border-top-left: 10px 20px; border-top-right: 10px 20px; border-bottom-left: 10px 20px; border-bottom-right: 10px 20px;	指定位置设置水平x/垂直y 方向的半径值
border-radius:100px 80px 60px 40px/20px 30px 40px 50px	设置四个角点的水平x/垂直y 方向上的不同圆角值，一一对应