CSS圆角边框、盒子阴影、文字阴影（01-07课）

最新推荐文章于 2022-04-22 15:04:45 发布

皮匠大大

最新推荐文章于 2022-04-22 15:04:45 发布

阅读量219

点赞数

分类专栏： CSS初学文章标签： css html

本文链接：https://blog.csdn.net/weixin_45727991/article/details/109929788

版权

CSS初学专栏收录该内容

18 篇文章 2 订阅

订阅专栏

01、综合案例-快报模块布局分析

1、大盒子div
2、分2个小盒子（上盒子为标题h，下盒子为列表（无序列表））

02、03、04、综合案例-快报制作

1、头部制作
2、快报模块列表制作

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购快报</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

        .box ul {
            padding-left: 21px;
            padding-top: 7px;
        }

        .box ul li {
            height: 23px;
            /* 文字垂直居中 */
            line-height: 23px;
        }

        .box ul li a {
            color: #666666;
            text-decoration: none;
            font-size: 12px;
        }

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

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

        .box h3 {
            height: 32px;
            /* 只需要制作下边框 */
            border-bottom: 1px dotted #cccccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            /* 不能用margin来让文字左移，因为盒子也会左移，虚线就露出来了，要用padding,而且由于h3没有给出宽度，padding不会撑开 */
            padding-left: 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">爱如嘎普爱肝日诶</a></li>
            <li><a href="#">咖喱UR股哈根</a></li>
            <li><a href="#">噶人笔录哈六人行宫</a></li>
            <li><a href="#">奥瑞格刘荣华拉UR个</a></li>
            <li><a href="#">累啊壶盖好尬u</a></li>
        </ul>
    </div>
</body>

</html>

04、圆角边框原理和使用`border-radius`

1、语法border-radius:length;（length越大，弧度越大）

2、radius半径原理：（椭）圆与边框的交集形成圆角效果
见图：（length为边缘4个圆的半径，因此length越大，弧度越大）在这里插入图片描述

05、圆角边框的使用

1、length可以是半径的实际值、也可以是半分比的形式
eg1：圆形的做法：给一个正方形矩形中的CSS代码设置；

border-radius: 50%

！！！50%为弧度的最大值（无论是圆形还是椭圆），大于50%的都一样

eg2：如果是个矩形，length设为高度的一半，即可做成类似括号的那种形状

2、该属性是一个简写属性，其实有四个属性值，分别为：左上角、右上角、右下角、左下角（顺时针）border-top-left-radius\border-top-right-radius\border-bottom-right-radius\border-bottom-left-radius
如果是两个参数，则分别为：正对角的两个角、负对角的两个角

06、盒子阴影`box-shadow`

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

2、语法格式：box-shadow : h-shadow v-shadow blur spread color inset;
在这里插入图片描述
eg：
（以下这一串值很实用）

 box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);

！！！默认为外阴影（outset），但是要用外阴影的话，不要写这个单词，否则无效
盒子阴影不占用内存空间，不会影响其他盒子排列

3、给盒子制作鼠标经过后就变化为阴影的效果：（很多盒子都有hover的操作，不止a一个）

        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);
        }

07、文字阴影`text-shadow`

1、语法text-shadow: h-shadow v-shadow blur color;
在这里插入图片描述
eg：

text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);

（不是很常用）

皮匠大大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS圆角边框、盒子阴影、文字阴影（01-07课）

01、综合案例-快报模块布局分析

02、03、04、综合案例-快报制作

04、圆角边框原理和使用border-radius

05、圆角边框的使用

06、盒子阴影box-shadow

07、文字阴影text-shadow

04、圆角边框原理和使用`border-radius`

06、盒子阴影`box-shadow`

07、文字阴影`text-shadow`