边框圆角阴影

柚子会一直发光的

已于 2023-09-01 10:32:24 修改

阅读量1.1k

点赞数

文章标签： javascript html 前端

于 2022-07-20 20:29:17 首次发布

本文链接：https://blog.youkuaiyun.com/m0_72699629/article/details/125899610

版权

1. border边框:

border-style:边框样式，

值：

double：定义双实线；

none；定义无边框；

solid：定义实线

dashed：定义虚线；

dotted:定义点状线

groove：定义3D凹槽效果；

ridge；定义3D隆起效果；

border-color:边框的颜色默认是黑色（2D）或者灰色(3D)。

border-width:边框默认粗细是3px；

代码如下;

运行结果如图：

2.圆角:border-radius

可控制四个角的圆角；

一个值：四个角的圆角；

俩个值：分别代表左上角和右下角，右上角和左下角；

三个值：分别代表左上角，右上角和左下角，右下角；

四个值：分别代表左上角，右上角，右下角，左下角；

单脚设置：

border-top-left-radius: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

代码如下：

运行结果如图：

（2）代码如下：

运行结果如图：

PS:这里的文字不完整是因为上面用了overflow:hidden将文字溢出的部分隐藏了。

4. 盒子阴影: box-shadow；

值：

inset：内阴影，可选。取值相反。

第一个值：阴影距离盒子的左右距离，正值往右负值往左，0盒子正下方。

第二个值：阴影距离盒子的上下距离，正值往下，负值往上，0盒子正下方。

第三个值：阴影的清晰度（值不能为负），阴影值越大会以渐变的形式呈椭圆形向外扩散。

第四个值：阴影的颜色：

注意：可以一个元素同时添加多个阴影，值之间用逗号隔开。

代码如下：

运行结果如图：

5.文本阴影：text-shadow

值：

第一个值：阴影距离盒子的左右距离，正值往右 ,负值往左，0盒子正下方。

第二个值：阴影距离盒子的上下距离，正值往下，负值往上，0盒子正下方。

第三个值：阴影的清晰度（值不能为负），阴影值越大会以渐变的形式呈椭圆形向外扩散。

第四个值：阴影的颜色：

注意：可以一个元素同时添加多个阴影，值之间用逗号隔开。

代码如下：

如图所示：

完整代码如下：

<!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>
        #div1{
            width:200px;
            height: 200px;
            background-color: aquamarine;
            margin: 20px,auto;

            border-style: dotted;
            border-width: 10px;
            border-color: aquamarine;
            border-top: 3px #ff2312 solid;
            
        }  
        #div2{
            width:100px;
            height: 60px;
            background-color: aquamarine;
            margin: 20px,auto;
            /* border-radius: 20px 30px; */
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            border-bottom-right-radius: 20px;
        }
        #div3{
            width:300px;
            height: 300px;
            background-color: aquamarine;
            margin: 20px,auto;
            border-radius: 20%; 
            overflow: hidden;

        }

        .box{
            width:300px;
            height: 300px;
            background-color: aquamarine;
            margin: 20px,auto;
            box-shadow: inset 5px 5px 5px #ff2312,5px 5px 5px #333,5px 5px 5px #ff2312;
        }
        p{
            font-size: 60px;
            font-weight: 900;
            text-shadow: 5px 5px 5px #cfc,-10px -20px 10px #ccf;
        }

    </style>
</head>
<body>
   
    <div id="div1"></div>

 <br>
 <br>
 <br>

    <div id="div2"></div>
    <br>
    <br>
    <br>
    <div id="div3">时代的</div>
    <br>
<br>
<br>

    
<section class="box"></section>
<br>
<br>
<br>

<p>中所产生的成都</p>

</body>
</html>

完整运行结果如图所示：