本文已参与「新人创作礼」活动，一起开启掘金创作之路。

🔥 本文由程序喵正在路上原创，在稀土掘金首发！
💖 系列专栏：HTML+CSS
🌠 首发时间：2022年9月2日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾
🌟 一以贯之的努力不得懈怠的人生

PS 基本操作

src=http___n.sinaimg.cn_spider2020529_294_w700h394_20200529_982a-iufmpmp0292991.gif&refer=http___n.sinaimg.gif

因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成

文件➔打开：可以打开我们要测量的图片
Ctrl + R：可以打开标尺，或者视图➔标尺
右击标尺，把里面的单位改为像素
Ctrl + 加号(+) 可以放大视图，Ctrl + 减号(-) 可以缩小视图
按住空格键，鼠标可以变成小手，拖动 PS 视图
用选区拖动，可以测量大小
Ctrl + D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

综合案例

1. 产品模块

布局分析

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-产品模块</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级的盒子水平居中对齐 */
            margin: 100px auto;
        }

        .box img {
            width: 100%;
        }

        .review {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有width属性，所以padding不会撑开盒子的宽度 */
            padding: 0 28px;
            margin-top: 30px;
        }

        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }

        .info h4 {
            display: inline-block;
            font-weight: 400;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info span {
            color: #ff6700;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img.jpg" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">
            <h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>
</body>

</html>

2. 快报模块

新知识点：去掉 li 标签前面的项目符号（小圆点）

语法：

list-style: none;

代码实现：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快报模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            /* 去掉li前面的小圆点 */
            list-style: none;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            /* 虚线下边框 */
            border-bottom: 1px dotted #ccc;
            line-height: 32px;
            font-size: 14px;
            font-weight: 400;
            /* 左边空隙 */
            padding-left: 15px;
        }

        .box ul li a {
            color: #666;
            font-size: 12px;
            /* 去掉下划线 */
            text-decoration: none;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }

        .box ul {
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】惠普GK100F机械键盘仅76.9！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000元！</a></li>
    </div>
</body>

</html>

圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了

border-radius 属性用于设置元素的外边框圆角

语法：

border-radius: length;

radius 半径（圆的半径）

原理：（椭）元与边框的交集形成圆角效果

参数值可以为数值或者百分比的形式
如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
如果是个矩形，设置为高度的一半就可以做
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        .circle {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 50%;
        }

        .rect {
            width: 300px;
            height: 100px;
            background-color: skyblue;
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 40px 50px 60px 70px;
        }
    </style>
</head>

<body>
    1. 圆形的做法：
    <div class="circle"></div>
    2. 矩形的做法：
    <div class="rect"></div>
    3. 可以设置不同的圆角
    <div class="radius"></div>
</body>

</html>

盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性来为盒子添加阴影

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

注意：

默认的是外阴影，但是写代码时不需要写入这个值，否则阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
        }

        /* 原来盒子没有影子，当鼠标经过才有影子 */
        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }
    </style>
</head>

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

</html>

2022年8月28日22时5分29秒.gif

文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本

语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影颜色

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字阴影</title>
    <style>
        div {
            font-size: 40px;
            color: aqua;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>
        Now I have come to crossroads in my life
    </div>
</body>

</html>

【玩转CSS】PS操作&圆角边框&阴影