按钮的圆角属性

xiao45683968

于 2023-06-01 10:36:12 发布

阅读量110

点赞数

文章标签： css javascript css3

本文链接：https://blog.csdn.net/xiao45683968/article/details/130981624

版权

圆角属性

圆角属性的取值第一个值左上右下

第二个值就是左下右上

主要就是边框软化。

<!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>Document</title>
    <style>
        p {
            width: 300px;
            height: 300px;
            background-color: aqua;
            border-radius: 20px;/* 圆角属性   一个值就是 上右下左  都是20px */
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

课后练习，实现如下效果
在这里插入图片描述

代码如下

<!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>Document</title>
    <style>
        *{
            margin:0%;
            padding: 0%;
            list-style: none;
        }
               
        button{
            width: 60px;
            height: 20px;
            color:#3478A6;
            border-radius: 3px;
            border-color: #3478A6;
            cursor: pointer;/* 有一个小手 */
        }
        button:hover{
            /*鼠标悬浮*/
            background-color: #b3cee1;
        }

        span{
            color: green;
        }
        a{
            color:#3478A6;
        }
        a:hover{
            color: aqua;
            background-color: #fff;
            cursor: pointer;/* 有一个小手 */
        }
        cite{
            color:#CA6445;
            width: 300px;
            height: 30px;
            background-color:#FAE9DA;
        }
        th{
            width: 300px;
            text-align: left;
            border-bottom: 2px dotted rgb(198, 183, 183);/*一条虚线*/
        }
        td{
            color: blue;
            border-bottom: 2px dotted rgb(198, 183, 183);
        }
         
    </style>
</head>
<body>
    <p>
        <span>黑猫警长的图片·······</span>
        (<a>添加视频评论</a>|<a>图片277</a>·<a>添加</a>)
    </p>
    <p>
        <img src="../img/1.jpg" alt="" width="150px" height="120px">
        <img src="../img/2.jpg" alt="" width="150px" height="120px">
        <img src="../img/3.jpg" alt="" width="150px" height="120px">
        <img src="../img/4.jpg" alt="" width="150px" height="120px">
        <img src="../img/5.jpg" alt="" width="150px" height="120px">
    </p>
    <p>
        <span>讨论区·······</span>
        (<a>全部</a>)
    </p>
    <br>
    <button>最新</button>
    <button>热门</button>
    <button>1集</button>
    <button>2集</button>
    <button>3集</button>
    <button>4集</button>
    <button>5集</button>
    <table>
        <thead>
            <tr>
                <th>讨论</th>
                <th>作者</th>
                <th>回应</th>
                <th>最后回应</th>
            </tr>
            <tr>
                <td>怎么没上九分？</td>
                <td>问世间情为何物</td>
                <td>10</td>
                <td>2023-05-30 00:27</td>
            </tr>
            <tr>
                <td>怎么没上九分？</td>
                <td>问世间情为何物</td>
                <td>10</td>
                <td>2023-05-30 00:27</td>
            </tr>
        </thead>
    </table>
    
    
</body>
</html>