前端CSS小作业练习（三）

最新推荐文章于 2021-12-02 15:57:37 发布

梦境工程师-335

最新推荐文章于 2021-12-02 15:57:37 发布

阅读量1.5k

点赞数

分类专栏：前端_CSS3 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_41136216/article/details/106203735

版权

前端_CSS3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

第一题【CSS3的基本用法之按钮】
第二题【CSS3的基本用法之图片边框显示】

第一题【CSS3的基本用法之按钮】

网站实现如下内容：
（1）包含1个网页。（1分）
（2）完成一个60*20px的区域，作为按钮（1分）
      a) 按钮四角为圆角（1分）
      b) 用阴影做出按钮立体效果（1分）
      c）光标形状改为手形（1分）

<!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>
        .button{
            width:60px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 14px;
            box-shadow: 1px 1px 14px rgb(44, 42, 42);
            background-color: cornflowerblue;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="button">

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

在这里插入图片描述

第二题【CSS3的基本用法之图片边框显示】

网站实现如下内容：
（1）包含1个网页，一个图片。（1分）
（2）光标停留在图片上，1s钟时间，出现浅蓝色边框（1分）

<!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>
        img{
            border: 4px solid #fff;
            border-radius: 12px;
            transition: border 1s ease;
        }
        
        img:hover{
            border: 4px solid rgb(114, 210, 255);
        }
    </style>
</head>
<body>
    <img src="http://img1.imgtn.bdimg.com/it/u=1216473521,352427174&fm=26&gp=0.jpg" alt="" srcset="">
</body>
</html>

在这里插入图片描述

梦境工程师-335

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端CSS小作业练习（三）

文章目录第一题【CSS3的基本用法之按钮】第二题【CSS3的基本用法之图片边框显示】第一题【CSS3的基本用法之按钮】网站实现如下内容：（1）包含1个网页。（1分）（2）完成一个60*20px的区域，作为按钮（1分）      a) 按钮四角为圆角（1分）      b) 用阴影做出按钮立体效果（1分） &nb
复制链接

扫一扫