1.text-transform属性控制文本的大小写

最新推荐文章于 2023-10-01 09:20:23 发布

旺仔小薯条

最新推荐文章于 2023-10-01 09:20:23 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：盒子阴影文章标签： html html5 css css3

本文链接：https://blog.youkuaiyun.com/begin_glory/article/details/113178147

盒子阴影专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS中的text-transform属性，用于控制文本的大小写转换，并详细讲解了box-shadow属性如何添加盒子阴影，包括其语法和注意事项。同时提到了文字阴影text-shadow的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.text-transform属性控制文本的大小写

属性值

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承text-transform属性的值。

2.object-fit属性指定元素的内容应该如何去适应指定容器的宽度和高度。

object-fit一般用于img和video标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。可以通过使用object-position属性来切换被替换元素的内容对象在元素框内的对齐方式。

值	描述
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例，内容的尺寸与none或contain中的一个相同，取决于他们两个之间谁得到的对象尺寸会更小一些。
initial	设置为默认值
inherit	从该元素的父元素继承属性。

3.添加盒子阴影

用box-shadow属性为盒子添加阴影

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

(x y 羽化尺寸颜色内部阴影)

在这里插入图片描述

注意：

①默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效

②盒子阴影不占用空间，不会影响其他盒子排列

4.若想设置鼠标经过盒子时出现阴影，可以用hover来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color:pink;
            margin:100px auto;
        }
        div:hover{
            box-shadow:10px 10px 10px -4px rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>