CSS笔记盒子模型文字阴影

最新推荐文章于 2024-03-23 23:56:18 发布

yogur_father

最新推荐文章于 2024-03-23 23:56:18 发布

阅读量218

点赞数

分类专栏：入门学习文章标签： css html

本文链接：https://blog.csdn.net/yogur_father/article/details/109687016

版权

入门学习专栏收录该内容

156 篇文章 3 订阅

订阅专栏

一.盒子模型常用属性

这个属性一般是加在表格中的属性
使用border

注：边框border会撑大盒子

如果是一个父盒子里面有个子盒子
想要子盒子在父盒子的中间显示
可以给父盒子设置一个边框

/* 表格 */
table {
    width: 500px;
    height: 249px;
}

table,
td,
th {
    /* 边框大小 边框样式 边框颜色 */
    /* 边框样式 solid实线 dashed虚线 dotted 点线 */
    border: 1px solid pink;
    border-top: 1px dotted blue;
    
    /* 相邻边框合并，不会出现加粗现象 */
    border-collapse: collapse;

    font-size: 14;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
    <link rel="stylesheet" href="style.css">   
</head>
<body>
    <table>
        <thead>  <!-- 表头 -->
            <tr> 
                <th> 姓名 </th> 
                <th> 年龄 </th> 
                <th> 性别 </th> 
            </tr>
        </thead>

        <tbody>  <!-- 数据体 -->
            <!-- 第一行 -->
            <tr> 
                <td> yyr </td> 
                <td> 21 </td> 
                <td> 男 </td> 
            </tr>
            <!-- 第二行 -->
            <tr> 
                <td> ljj </td> 
                <td> 20 </td> 
                <td> 女 </td> 
            </tr>
        </tbody>    
    </table>
</body>
</html>

在这里插入图片描述

边框样式 solid实线， dashed虚线， dotted 点线
也可也是设置上边 border-top: 1px dotted blue;

二.内边距

使用padding-top，单位是像素
注：内边距会撑大盒子
但是如果不加边距属性则不会撑大盒子

/* div */
div {
    width: 200px;
    height: 200px;
    background-color: skyblue;

    /* 内边距 */
    padding-left: 20px;
    padding-top: 20px;

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        我的名字和这句话一样长
        我的名字和这句话一样长
        我的名字和这句话一样长
        我的名字和这句话一样长
        我的名字和这句话一样长
        我的名字和这句话一样长
        我的名字和这句话一样长
    </div>
</body>

</html>

在这里插入图片描述

三.外边距

使用margin，margin-top，margin-left等，单位是像素

如果想要居中
①必须设置宽度
②让左右设置为auto

/* div */
div {
    width: 900px;
    height: 200px;
    background-color: skyblue;

    /* 外边距 */
    margin: 100px auto;

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        
    </div>
</body>

</html>

在这里插入图片描述

四.清除内外边距

* {
	padding：0px;
	margin: 0px;
}

五.圆角矩形

使用border-radius: 10px;
在这里插入图片描述

也可使用百分比，表示宽度和高度的百分之几
同样也可以写四个参数，顺时针表示四个角的圆角形状

六.盒子阴影

在这里插入图片描述
使用box-shadow：
水平和竖直是必须要写的

/* div */
div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    border-radius: 10px;
    margin: 0 auto;
}

div:hover {
    box-shadow: 0px 10px 50px 10px rgba(0, 0, 0, .3);
}

在这里插入图片描述

最后一个是默认外阴影使用inset变成内阴影

box-shadow: 0px 10px 50px 10px rgba(0, 0, 0, .3) inset;

在这里插入图片描述

七.文字阴影

在这里插入图片描述
使用text-shadow：

/* div */
div {
    
    font-size: 50px;
    color: red;
    width: 700px;
}

div:hover {
    text-shadow: 5px 5px 6px rgba(0, 0, 0, .3) ;
}

在这里插入图片描述

yogur_father

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记盒子模型文字阴影

一.盒子模型常用属性这个属性一般是加在表格中的属性使用border注：边框border会撑大盒子如果是一个父盒子里面有个子盒子想要子盒子在父盒子的中间显示可以给父盒子设置一个边框/* 表格 */table { width: 500px; height: 249px;}table,td,th { /* 边框大小边框样式边框颜色 */ /* 边框样式 solid实线 dashed虚线 dotted 点线 */ border: 1px so
复制链接

扫一扫