边框，圆角和阴影以及浮动布局的应用！

最新推荐文章于 2024-04-04 02:42:34 发布

id2359955624

最新推荐文章于 2024-04-04 02:42:34 发布

阅读量937

点赞数 1

文章标签：大数据

本文链接：https://blog.csdn.net/id2359955624/article/details/125728417

版权

 <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            margin: 20px auto;

            /* border: 1px solid black; */
            border-style: ridge;
            border-width: 10px;
            border-top: 3px #ff2312 solid;
        }

        #div2{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            margin: 20px auto;
            /* border-radius: 20px 30px 40px 50px; */
            border-top-left-radius: 20px;
            border-top-right-radius: 30px;
            border-bottom-left-radius: 40px;
            border-bottom-right-radius: 50px;
        }

        #div3{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin: 20px auto;
            border-radius: 50%;
            /* line-height: 100px; */
            overflow: hidden;
        }

        .box{
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin: 40px auto;
            border: 1px solid;
            box-shadow: inset 5px 5px 5px #cfc,5px 5px 5px #cfc,-10px -20px 10px #ccf,10px 10px 10px red;
        }

        p{
            font-size: 60px;
            font-weight: 900;
            text-shadow: 5px 5px 5px #cfc,-10px -20px 10px #ccf;
        }
    </style>
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3">文本内容</div>
    <section class="box"></section>
    <br>
    <br>
    <br>  
    <p>这是一个段落</p>
</body>

如下图：

边框：

如上步骤：div1

设置宽度/200px

高度/200px

背景颜色/ 为#ccc

文本居中。上下高为20px自动改变

设置边缘线

边缘线为10px

边缘线顶部线为3px，为红色

border边框：

border-style: 边框样式；

值：

none：定义无边框；

solid：定义实线；

double：定义双实线；

dashed：定义虚线；

dotted：定义点状线；

groove：定义3D凹槽效果；

ridge：定义3D隆起效果；

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

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

圆角：

div2

设置宽度/200px

高度/200px

背景颜色/ 为#ccc

文本居中。上下高为20px自动改变

border-radius：6px 6px 6px；（设置圆角）

设置顶部左边

设置底部右边

设置底部左边

设置底部右边

圆角：border-radius:

可控制四个角的圆角；

一个值：四个角的圆角；

两个值：分别代表左上角和右下角、右上角和左下角；

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

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

单脚设置：

border-top-left-radius: 20px;

border-top-right-radius: 30px;

border-bottom-left-radius: 40px;

border-bottom-right-radius: 50px;

文本内容在边框的应用：

div3

设置宽度

设置高度

设置底部颜色

水平居中，上下20px

圆弧长度为圆心（50%）

溢出值隐藏

阴影：

box

设宽

设高

设背景颜色

水平居中

边框为1px ，固体

box-shadow: inset px px px 颜色 ,px px px 颜色, px px px 颜色 ,px px px 颜色

盒子阴影：box-shadow: inset 5px 5px 5px #cfc,5px 5px 5px #cfc;

值：

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

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

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

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

第四个值：阴影的颜色；

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

文本阴影

字体大小为60px

字体粗细为900

文本阴影：大小颜色

文本阴影：text-shadow: 5px 5px 5px #cfc;

值：

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

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

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

第四个值：阴影的颜色；

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

浮动布局

什么是浮动：

浮动最开始出现是为了让文本环绕图片，但是发现浮动元素可以设置宽高或内联排列，是结于inline和block之间的一个特别存在。

地方元素直到遇到父级元素或者同级浮动元素的边沿是停下，多个浮动元素相遇会按照内联的排列方式进行排列。

使用方法：

给元素直接添加：float: left/none/right;

值：

none：默认值，元素不浮动，并会显示在其文档流中出现的位置。

left：向左浮动，会在页面或者父级元素的左侧。

right：向右浮动，会在页面或者父级元素的右侧。

特点：

1.元素使用浮动后会在页面/父元素的左边或者右边停留；

2.元素使用浮动元素之后会脱离文档流，参与浮动文档流；

3.文本和浮动元素相遇，会在其周围停下来；

4.多个浮动元素相遇会按照内联的排列方式进行排列。

为什么需要浮动：

可以用来创建网页布局，比如左右两端布局栏。

为什么需要清除浮动：

当子元素设置了float属性之后，且父元素没有设置高度，而是由资源近视撑出，则导致父元素高度塌陷；

多个浮动元素内联排列，会覆盖页面中正常的文档流中的内容。

清除浮动方法：

1.加高法：给父元素添加高度，值等于大于浮动子元素的高度，把浮动元素关在有高度的盒子之内；

2.clear: both;给浮动元素添加，添加后可以控制当前元素不以内联排列的方式去找其他浮动元素；

3.隔墙法：给浮动元素之间添加clear: both;让两个浮动元素之间添加一堵墙隔开。

-->

 <style>
        #web-list{
            list-style: none;
            padding: 0;
            background-color: aqua;
        }
        #web-list li:hover{
            background-color: green;
        }

        #web-list li{
            float: left;
            background-color: greenyellow;
            margin: 0 30px;
            padding: 5px 10px;
            border-radius: 4px;
            /* 鼠标指针设置为超衔接 */
            cursor: pointer;


        }
        .clear{
            clear: both;
        }
        .clear-fix::after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
<body>
    <ul id="web-list" class="clear-fix">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>VUE</li>
        <!-- <div class="clear"></div> -->
    </ul>
</body>

如图所示：鼠标移动在字体上变色